Skip to content

Commit

Permalink
V2.0
Browse files Browse the repository at this point in the history 
- Using Twitter JS Library instead of Twitter PHP API
- Animation and Grid Layout
- Refresh posts by adding recent posts if any every 60 seconds
- Fix Bugs, and Enhancements
- Modify Styles
- Plugin method is chainable
  • Loading branch information
@OmarElgabry
OmarElgabry committed Nov 24, 2015
1 parent 8c2536a commit 28ac95f
Show file tree
Hide file tree
Showing 11 changed files with 2,469 additions and 748 deletions.
104 changes: 57 additions & 47 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

# Hashtegny

jQuery Plugin aggregates hashtags from different social media networks. Posts are displayed in a unique, attractive, and animated layout.
jQuery Plugin aggregates hashtags from different social media networks. Posts are displayed in a unique, & attractive grid, and animated layout.

You can use it for personal purpose, during any conference or event, for an organization, or even at a Store. So, you can engage the audiences anywhere and increase your interaction and impact.

Expand All @@ -19,13 +19,12 @@ _How to do that?_ Simply you can use it on your website, mobile, TV displays, or

Check [Demo](http://omarelgabry.github.io/Hashtegny/)

**NOTE** Twitter won't work in the previous demo link because Twitter API requires PHP, and GitHub Pages doesn't execute PHP. But, it works well on your local server or webserver.

## Features
+ Aggregates hashtags from different social media networks.
+ Displays the posts in a unique, attractive, and animated layouts.
+ Displays the posts in a grid and animated layout.
+ Works on different screen sizes.
+ It automatically updates the time stamp of each post.
+ It automatically adds recent posts if any.
+ Posts are sorted according to the time they were created at.
+ Posts are clickable.
+ Ready to be used anywhere; conference, event, at a Store.
Expand All @@ -44,64 +43,73 @@ npm install hashtegny

Add CSS Files:
```html
<!-- Animation -->
<link rel="stylesheet" href="css/animations.min.css" type="text/css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- Main CSS File(Animation Layout) - Default -->
<link id="style" rel="stylesheet" href="css/main.animation.css" type="text/css" />
```

Add JS Files:
```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/animations.min.js"></script>
<script type="text/javascript" src="js/appear.min.js"></script>
<script type="text/javascript" src="js/hashtegny.js"></script>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Animation -->
<script type="text/javascript" src="js/animations.min.js"></script>
<script type="text/javascript" src="js/appear.min.js"></script>
<!-- Grid Layout -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<!-- Twitter JS library -->
<script type="text/javascript" src="js/codebird.js"></script>
<!-- Hashtegny -->
<script type="text/javascript" src="js/hashtegny.js"></script>
```

Finally, Run the plugin:
```html
<!-- Inside your <body> tag -->
<div id="myPlugin"></div>
<div id="hashtegny-container"></div>
```
```js
<script>
$(document).ready(function(){

// start the plugin & pass your options
$('#myPlugin').hashtegny({
twitter:{
enable: true,
hashtag: "twitter",
count: 5 // number of posts to be displayed
},
google:{
enable: true,
hashtag: "google",
count: 5
},
instagram:{
enable: true,
hashtag: "insta",
count: 5
},
vk:{
enable: true,
hashtag: "зима",
count: 5
},
textLength: 300, // max length of post content
animate: 8, // time of animation for each post in seconds
updateTime: 60, // update post time every 60 second(1 min)
background: "background.jpg", // background image
showError: false // show error alert box if any error encountered
});
});
</script>
<script>
$(document).ready(function(){

// start the plugin & pass your options
$('#hashtegny-container').hashtegny({
twitter:{
enable: true,
hashtag: "twitter",
count: 5 // number of posts to be displayed
},
google:{
enable: true,
hashtag: "google",
count: 5
},
instagram:{
enable: true,
hashtag: "insta",
count: 5
},
vk:{
enable: true,
hashtag: "зима",
count: 5
},
textLength: 300, // max length of post content
animate: 8, // time of animation for each post in seconds
refresh: 60, // add recent posts if any every 60 seconds
updateTime: 60, // update post time every 60 second(1 min)
background: false, // add background image
showError: false // show error alert box if any error encountered
});
});
</script>
```
#### Want to change the image background?
#### Want to add image background?
Add your image in _img_ directory, then assign ```background``` to ```imagefilename.extension```.

Default is set to ```background.jpg```.

## Support
I've written this script in my free time during my studies. This is for free, unpaid. If you find it useful, please support the project by spreading the word.

Expand All @@ -110,8 +118,10 @@ I've written this script in my free time during my studies. This is for free, un
Contribute by creating new issues, sending pull requests on Github or you can send an email at: [email protected]

## Dependencies
+ [Twitter JS Library](https://github.com/jublonet/codebird-js)
+ [Animations](https://github.com/joemottershaw/animations)
+ [Twitter API](https://github.com/J7mbo/twitter-api-php )
+ [Grid Layout](https://github.com/desandro/masonry)
+ [Font Awesome](https://github.com/FortAwesome/Font-Awesome)

## License
Built under [MIT](http://www.opensource.org/licenses/mit-license.php) license.
76 changes: 45 additions & 31 deletions css/main.css → css/main.animation.css
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
/*
* Document : main.css
* Author : Omar El Gabry <[email protected]>
* Description: Main CSS File
* Description: Main CSS File(Animation Layout)
*
*/

html, body {
margin: 0;
height: 100%;
}
body {

background: #ecf0f1 url(../img/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #5f2c82; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #5f2c82 , #49a09d); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #5f2c82 , #49a09d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
}

Expand All @@ -23,7 +24,7 @@ body {
text-align: center;
display: none;
}
.mainPost.horizontal{
.mainPost.no-image{
width: 65%;
margin-top: 6%;
}
Expand All @@ -47,7 +48,7 @@ body {
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.horizontal .mainImgDiv{
.no-image .mainImgDiv{
display: none;
}

Expand All @@ -58,7 +59,7 @@ body {
width: 45%;
text-align: left;
}
.horizontal .userInfo{
.no-image .userInfo{
width: 100%;
}

Expand All @@ -74,7 +75,7 @@ body {
moz-border-radius: 3px;
webkit-border-radius: 3px;
}
.horizontal .userImg{
.no-image .userImg{
padding: 0.3%;
border: none;
min-height: 10em;
Expand All @@ -90,7 +91,7 @@ body {
overflow: hidden;
text-overflow: ellipsis;
}
.horizontal .userName{
.no-image .userName{
font-size: 1.2em;
}
.snImage{
Expand All @@ -99,7 +100,7 @@ body {
width: 12%;
margin-left: 25%;
}
.horizontal .snImage{
.no-image .snImage{
width: 15%;
margin-left: 22%;
}
Expand All @@ -123,7 +124,7 @@ body {
margin: 0;
overflow: hidden;
}
.horizontal .postText p{
.no-image .postText p{
font-size: 1.4em;
}
.postText span{
Expand All @@ -135,7 +136,7 @@ body {
font-family: Cambria, Georgia, serif;
font-size: 8em;
}
.horizontal .postText span{
.no-image .postText span{
font-size: 12em;
}
.postTime{
Expand Down Expand Up @@ -164,16 +165,15 @@ body {
color: white;
}

/* ==== Container === */
.container{
background-color: transparent;
background-color: rgba(250,250,250,.90);
/* ==== Search Container === */
.intro-container{
background-color: white;
text-align: center;
}
.container .toggle-header{
.intro-container .toggle-header{
color: #3498db;
}
.container .toggle-header:hover{
.intro-container .toggle-header:hover{
cursor: pointer;
color: #3cb0fd;
}
Expand Down Expand Up @@ -210,7 +210,18 @@ body {
}
.header button:hover{
cursor: pointer;
background: #3cb0fd;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.header button.animation-button, .header button.grid-button{
padding-left: 15px;
padding-right: 15px;
}
.header button.animation-button{
background-color: #49a09d;
}
.header button.grid-button{
background-color: #5f2c82;
}
.header input{
padding: 10px;
Expand All @@ -229,7 +240,10 @@ body {
.spinner{
color: #3498db;
text-align: center;
margin: 20% auto;
display: inline-block;
vertical-align: middle;
margin-top: -1px;
margin-left: 9px;
}

/* ==== Error === */
Expand Down Expand Up @@ -258,25 +272,25 @@ body {
.mainImgDiv {
width: 70%;
}
.vertical .userInfo{
.with-image .userInfo{
width: 70%;
}
.horizontal .userImg{
.no-image .userImg{
min-height: 7em;
max-height: 7em;
}
.horizontal .userName, .horizontal .postText p{
.no-image .userName, .no-image .postText p{
font-size: 1em;
}
.horizontal .postText span{
.no-image .postText span{
font-size: 8em;
}
.error{
font-size: 0.9em;
}
}
@media screen and (max-width: 480px) {
.mainPost, .mainPost.horizontal{
.mainPost, .mainPost.no-image{
width: 100%;
}
.mainImgDiv {
Expand All @@ -290,14 +304,14 @@ body {
max-height: 20em;
min-height: 20em;
}
.userImg,.horizontal .userImg{
.userImg,.no-image .userImg{
max-height: 4.5em;
min-height: 4.5em;
}
.userName,.postText p, .postTime, .horizontal .userName, .horizontal .postText p,.header, .stopButton, .updateButton, .downloadButton{
.userName,.postText p, .postTime, .no-image .userName, .no-image .postText p,.header{
font-size: 0.8em;
}
.postText span, .horizontal .postText span{
.postText span, .no-image .postText span{
font-size: 6em;
}
.postText:hover{
Expand Down
Loading

0 comments on commit 28ac95f

Please sign in to comment.