├── demo.js ├── sample_giphy.gif ├── sample_first_frame.png ├── jqGifPreview ├── background-image.png ├── background-image2.png ├── jqGifPreview.min.js ├── jqGifPreview.js ├── jqGifPreview.min.css └── jqGifPreview.css ├── README.md ├── demo.html └── LICENSE /demo.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sample_giphy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SodhanaLibrary/jqGifPreview/HEAD/sample_giphy.gif -------------------------------------------------------------------------------- /sample_first_frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SodhanaLibrary/jqGifPreview/HEAD/sample_first_frame.png -------------------------------------------------------------------------------- /jqGifPreview/background-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SodhanaLibrary/jqGifPreview/HEAD/jqGifPreview/background-image.png -------------------------------------------------------------------------------- /jqGifPreview/background-image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SodhanaLibrary/jqGifPreview/HEAD/jqGifPreview/background-image2.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jqGifPreview 2 | jQuery Plugin For GIF Preview As Like Facebook 3 | ###Explanation 4 | [Click here] (http://blog.ftmocks.com/2016/03/facebook-like-gif-preview-using-jquery.html) to read complete explanation 5 | ###Demo 6 | [Click here] (http://demo.ftmocks.com/angular/gif_preview/jqGifPreview/demo.html) to see demo 7 | 8 | ##Implementation 9 | ###Add jQuery 10 | ```js 11 | 12 | ``` 13 | ###Add CSS and JS files 14 | ```js 15 | 16 | 17 | ``` 18 | ###HTML 19 | ```js 20 | 21 | ``` 22 | ####Attributes 23 | **data-gif** : gif image path 24 | 25 | **src** : gif preview image path 26 | ##JS Code 27 | ```js 28 | $(".myImg").jqGifPreview(); 29 | ``` 30 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | Gif Preview with jquery 13 | 14 | 15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 |
24 | 25 | 26 | 27 | 33 | -------------------------------------------------------------------------------- /jqGifPreview/jqGifPreview.min.js: -------------------------------------------------------------------------------- 1 | !function(i){i.fn.jqGifPreview=function(){i.each(this,function(a,e){var s=i(e).prop("src"),t=i(e).attr("data-gif"),f=document.createElement("a");f.href=t;var r=f.hostname,n=i('
'+r+'
');i(e).css("display","none"),i(n).insertAfter(e);var c=i(n).find(".jqGifCircle"),d=i(n).find(".jqGifImageCircle"),o=i(n).find(".jqGifImageFooter"),l=i(n).find(".jqGifImage");c.click(function(i){d.addClass("jqGifRotating"),o.hide(),l.attr("src",t),l.bind("load",function(){d.removeClass("rotating"),c.hide(),l.unbind("load")}),i.stopPropagation()}),i(n).find(".jqGifImageDiv").click(function(){c.show(),d.removeClass("jqGifRotating"),o.show(),l.attr("src",s)})})}}(jQuery); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Srinivas Dasari 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /jqGifPreview/jqGifPreview.js: -------------------------------------------------------------------------------- 1 | (function( $ ) { 2 | $.fn.jqGifPreview = function() { 3 | $.each(this,function(ind,el) { 4 | var prevImage = $(el).prop("src"); 5 | var srcImage = $(el).attr("data-gif"); 6 | var a = document.createElement('a'); 7 | a.href = srcImage; 8 | var hostname = a.hostname; 9 | 10 | var html = $('
'+ 11 | '
'+ 12 | ' '+ 13 | '
'+ 14 | '
'+ 15 | '
'+ 16 | '
'+ 17 | '
'+ 18 | '
'+ 19 | '
'+ 20 | ' '+hostname+''+ 21 | ' '+ 22 | '
'+ 23 | '
'); 24 | $(el).css('display','none'); 25 | $(html).insertAfter(el); 26 | var jqGifCircle = $(html).find(".jqGifCircle"); 27 | var jqGifImageCircle = $(html).find(".jqGifImageCircle"); 28 | var jqGifImageFooter = $(html).find(".jqGifImageFooter"); 29 | var jqGifImage = $(html).find(".jqGifImage"); 30 | 31 | jqGifCircle.click(function(event){ 32 | jqGifImageCircle.addClass("jqGifRotating"); 33 | jqGifImageFooter.hide(); 34 | jqGifImage.attr("src", srcImage); 35 | jqGifImage.bind('load',function() { 36 | jqGifImageCircle.removeClass("rotating"); 37 | jqGifCircle.hide(); 38 | jqGifImage.unbind('load'); 39 | }); 40 | event.stopPropagation(); 41 | }); 42 | 43 | $(html).find(".jqGifImageDiv").click(function(){ 44 | jqGifCircle.show(); 45 | jqGifImageCircle.removeClass("jqGifRotating"); 46 | jqGifImageFooter.show(); 47 | jqGifImage.attr("src", prevImage); 48 | }); 49 | }); 50 | }; 51 | }( jQuery )); -------------------------------------------------------------------------------- /jqGifPreview/jqGifPreview.min.css: -------------------------------------------------------------------------------- 1 | .jqGifPreview{display:inline-block;min-height:44px;position:relative}.jqGifPreview .jqGifImageCenter{background-position:0 0;height:72px;overflow-wrap:break-word;position:absolute;top:50%;width:72px;background:url(background-image.png) rgba(0,0,0,0);margin:-36px 0 0 -36px}.jqGifPreview img{padding:0;margin:0}.jqGifPreview .jqGifImageCircle{background-position:0 -73px;height:66px;position:absolute;width:66px;background:url(background-image.png) 0 -73px rgba(0,0,0,0);margin:-33px 0 0 -33px}.jqGifPreview .jqGifImageName{background-position:0 -140px;height:17px;position:absolute;width:32px;background:url(background-image.png) 0 -140px rgba(0,0,0,0);margin:-9px 0 0 -16px}.jqGifPreview .jqGifImageFooter{background-position:0 0;bottom:0;color:#fff;cursor:pointer;height:56px;left:0;position:absolute;right:0;background:url(background-image2.png) rgba(0,0,0,0)}.jqGifPreview .jqGifImageFooterLeft{bottom:9px;color:#fff;cursor:pointer;height:18px;left:11px;max-width:400px;overflow-wrap:break-word;position:absolute;text-align:left;text-shadow:rgba(0,0,0,.4) 0 1px 4px;text-overflow:ellipsis;text-transform:uppercase;vertical-align:top;white-space:nowrap;width:186px;word-wrap:break-word;perspective-origin:93px 7px;transform-origin:93px 7px;border:0 #fff;font:normal normal bold normal 11px/14.74px helvetica,arial,sans-serif;outline:#fff 0;overflow:hidden;text-decoration:none}.jqGifPreview .jqGifImageFooterRight{background-position:0 -158px;bottom:9px;cursor:pointer;display:block;height:24px;position:absolute;right:10px;width:24px;background:url(background-image.png) 0 -158px rgba(0,0,0,0)}.jqGifPreview .jqGifImage,.jqGifPreview img{width:100%}.jqGifPreview .jqGifCircle{cursor:pointer;position:absolute;left:calc(50%);top:calc(50% - 12px)}@-webkit-keyframes jqGifRotating / Safari and Chrome /{from{-ms-transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes jqGifRotating{from{-ms-transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.jqGifPreview .jqGifRotating{-webkit-animation:jqGifRotating 2s linear infinite;-moz-animation:jqGifRotating 2s linear infinite;-ms-animation:jqGifRotating 2s linear infinite;-o-animation:jqGifRotating 2s linear infinite;animation:jqGifRotating 2s linear infinite} -------------------------------------------------------------------------------- /jqGifPreview/jqGifPreview.css: -------------------------------------------------------------------------------- 1 | .jqGifPreview { 2 | display: inline-block; 3 | min-height: 44px; 4 | position: relative; 5 | } 6 | 7 | .jqGifPreview .jqGifImageCenter { 8 | background-position: 0px 0px; 9 | height: 72px; 10 | overflow-wrap: break-word; 11 | position: absolute; 12 | top: 50%; 13 | width: 72px; 14 | background: rgba(0, 0, 0, 0) url("background-image.png") no-repeat 15 | scroll 0px 0px/auto padding-box border-box; 16 | margin: -36px 0px 0px -36px; 17 | } 18 | 19 | .jqGifPreview img { 20 | padding:0px; 21 | margin:0px; 22 | } 23 | 24 | .jqGifPreview .jqGifImageCircle { 25 | background-position: 0px -73px; 26 | height: 66px; 27 | position: absolute; 28 | width: 66px; 29 | background: rgba(0, 0, 0, 0) url("background-image.png") no-repeat 30 | scroll 0px -73px/auto padding-box border-box; 31 | margin: -33px 0px 0px -33px; 32 | } 33 | 34 | .jqGifPreview .jqGifImageName { 35 | background-position: 0px -140px; 36 | height: 17px; 37 | position: absolute; 38 | width: 32px; 39 | background: rgba(0, 0, 0, 0) url("background-image.png") no-repeat 40 | scroll 0px -140px/auto padding-box border-box; 41 | margin: -9px 0px 0px -16px; 42 | } 43 | 44 | .jqGifPreview .jqGifImageFooter { 45 | background-position: 0px 0px; 46 | bottom: 0px; 47 | color: rgb(255, 255, 255); 48 | cursor: pointer; 49 | height: 56px; 50 | left: 0px; 51 | position: absolute; 52 | right: 0px; 53 | background: rgba(0, 0, 0, 0) url("background-image2.png") repeat-x 54 | scroll 0px 0px/auto padding-box border-box; 55 | } 56 | 57 | .jqGifPreview .jqGifImageFooterLeft { 58 | bottom: 9px; 59 | color: rgb(255, 255, 255); 60 | cursor: pointer; 61 | height: 18px; 62 | left: 11px; 63 | max-width: 400px; 64 | overflow-wrap: break-word; 65 | position: absolute; 66 | text-align: left; 67 | text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px; 68 | text-overflow: ellipsis; 69 | text-transform: uppercase; 70 | vertical-align: top; 71 | white-space: nowrap; 72 | width: 186px; 73 | word-wrap: break-word; 74 | perspective-origin: 93px 7px; 75 | transform-origin: 93px 7px; 76 | border: 0px none rgb(255, 255, 255); 77 | font: normal normal bold normal 11px/14.74px helvetica, arial, 78 | sans-serif; 79 | outline: rgb(255, 255, 255) none 0px; 80 | overflow: hidden; 81 | text-decoration: none; 82 | } 83 | 84 | .jqGifPreview .jqGifImageFooterRight { 85 | background-position: 0px -158px; 86 | bottom: 9px; 87 | cursor: pointer; 88 | display: block; 89 | height: 24px; 90 | position: absolute; 91 | right: 10px; 92 | width: 24px; 93 | background: rgba(0, 0, 0, 0) url("background-image.png") no-repeat 94 | scroll 0px -158px/auto padding-box border-box; 95 | } 96 | 97 | .jqGifPreview img { 98 | width: 100%; 99 | } 100 | 101 | .jqGifPreview .jqGifImage { 102 | width: 100%; 103 | } 104 | 105 | .jqGifPreview .jqGifCircle { 106 | cursor: pointer; 107 | position: absolute; 108 | left: calc(50%); 109 | top: calc(50% - 12px); 110 | } 111 | 112 | @-webkit-keyframes jqGifRotating / Safari and Chrome / {from { 113 | -ms-transform:rotate(0deg); 114 | -moz-transform: rotate(0deg); 115 | -webkit-transform: rotate(0deg); 116 | -o-transform: rotate(0deg); 117 | transform: rotate(0deg); 118 | } 119 | 120 | to { 121 | -ms-transform: rotate(360deg); 122 | -moz-transform: rotate(360deg); 123 | -webkit-transform: rotate(360deg); 124 | -o-transform: rotate(360deg); 125 | transform: rotate(360deg); 126 | } 127 | 128 | } 129 | @keyframes jqGifRotating {from { -ms-transform:rotate(0deg); 130 | -moz-transform: rotate(0deg); 131 | -webkit-transform: rotate(0deg); 132 | -o-transform: rotate(0deg); 133 | transform: rotate(0deg); 134 | } 135 | 136 | to { 137 | -ms-transform: rotate(360deg); 138 | -moz-transform: rotate(360deg); 139 | -webkit-transform: rotate(360deg); 140 | -o-transform: rotate(360deg); 141 | transform: rotate(360deg); 142 | } 143 | 144 | } 145 | .jqGifPreview .jqGifRotating { 146 | -webkit-animation: jqGifRotating 2s linear infinite; 147 | -moz-animation: jqGifRotating 2s linear infinite; 148 | -ms-animation: jqGifRotating 2s linear infinite; 149 | -o-animation: jqGifRotating 2s linear infinite; 150 | animation: jqGifRotating 2s linear infinite; 151 | } --------------------------------------------------------------------------------