daily pastebin goal
30%
SHARE
TWEET

jquery.jimgallery.js

jegtheme Nov 6th, 2014 193 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /***
  2.  * @author : jegbagus
  3.  * file name : jquery.jimggallery.js
  4.  */
  5.  
  6. (function ($, PhotoSwipe, window, document) {
  7.     "use strict";
  8.     $.fn.jimggallery = function (options) {
  9.  
  10.         options = $.extend({
  11.             loadcount: 10,
  12.             totalpage: 1,
  13.             loadAnimation: 'seqfade', // normal | fade | seqfade | upfade | sequpfade | randomfade | randomupfade
  14.             gallerysize: 400,
  15.             galleryexpand: 'magnific',
  16.             slidedelay: 1000,
  17.             dimension: 0.6,
  18.             tiletype: 'normal', // normal || masonry
  19.             photoswipeslideautoplay: 1,
  20.             photoswipeslidedelay: 4000,
  21.             photoswipehidetitle: 0,
  22.             justifiedheight: 250,
  23.             action: 'get_gallery_pagemore',
  24.             imageScaleMethod: 'fit',
  25.             gallerytype: 'isotopewrapper',
  26.             photoswipescale: ''
  27.         }, options);
  28.  
  29.         return $(this).each(function () {
  30.             var element = $(this),
  31.                 container = $(this).find('.imagelist-content-wrapper ').find('> div'),
  32.                 loader = $('.portfolioloader'),
  33.                 photoswipe = null,
  34.                 curpage = 0,
  35.  
  36.                 get_image_column_number = function (ww) {
  37.                     ww = ww > 1920 ? 1920 : ww;
  38.                     return Math.round(ww / options.gallerysize);
  39.                 },
  40.  
  41.                 calc_normal_height = function (itemwidth, thisheight) {
  42.                     var imgwidth = itemwidth * options.dimension;
  43.                     return {
  44.                         'itemheight': imgwidth * thisheight
  45.                     };
  46.                 },
  47.  
  48.                 checkdimension = function (element) {
  49.                     var elementdim = $(element).height() / $(element).width(),
  50.                         imagedim = $(element).find('img').height() / $(element).find('img').width();
  51.  
  52.                     $(element).find('img').removeClass('fixwidthportfolio');
  53.                     if (elementdim > imagedim) {
  54.                         $(element).find('img').addClass('fixwidthportfolio');
  55.                     }
  56.                 },
  57.  
  58.                 resize_gallery_item_list = function () {
  59.                     var wrapperwidth = $('.imagelist-content-wrapper > div').width();
  60.  
  61.                     if (options.tiletype === 'normal' || options.tiletype === 'masonry') {
  62.                         var portfolionumber = get_image_column_number(wrapperwidth),
  63.                             itemwidth = Math.floor(wrapperwidth / portfolionumber);
  64.  
  65.                         $(".imggalitem", element).each(function () {
  66.                             var thiswidth = parseFloat($(this).data('width')),
  67.                                 thisheight = parseFloat($(this).data('height'));
  68.  
  69.                             while ((  thiswidth * itemwidth > $(container).width() + 5  ) && thiswidth > 1) {
  70.                                 thiswidth = thiswidth - 1;
  71.                             }
  72.  
  73.                             $(this).width(Math.floor(itemwidth * thiswidth) - ( options.margin * 2) - 1);
  74.  
  75.                             if (options.tiletype === 'normal') {
  76.                                 var res = calc_normal_height(itemwidth, thisheight);
  77.                                 $(this).css({ height: res.itemheight });
  78.  
  79.                                 // check image
  80.                                 checkdimension(this);
  81.                             }
  82.                         });
  83.                     } else if (options.tiletype === 'justified') {
  84.                         var justifiedheight = options.justifiedheight,
  85.                             imgarray = $(".imggalitem", element).find('img'),
  86.                             dimension = [];
  87.  
  88.                         // get image dimension
  89.                         $(imgarray).each(function (i) {
  90.                             var imgwidth = $(imgarray[i]).get(0).naturalWidth,
  91.                                 imgheight = $(imgarray[i]).get(0).naturalHeight;
  92.  
  93.                             dimension[i] = {
  94.                                 'width': Math.floor(justifiedheight * imgwidth / imgheight),
  95.                                 'height': justifiedheight,
  96.                                 'img': this
  97.                             };
  98.                         });
  99.  
  100.                         // build row
  101.                         var row = [],
  102.                             rowcount = 0,
  103.                             cachewrapperwidth = wrapperwidth;
  104.                         row[rowcount] = [];
  105.  
  106.                         $(dimension).each(function () {
  107.                             cachewrapperwidth = cachewrapperwidth - this.width;
  108.                             if (cachewrapperwidth > 0) {
  109.                                 // use available row
  110.                                 row[rowcount].push(this);
  111.                             } else {
  112.                                 // create another row
  113.                                 cachewrapperwidth = wrapperwidth - this.width;
  114.                                 row[++rowcount] = [];
  115.                                 row[rowcount].push(this);
  116.                             }
  117.                         });
  118.  
  119.                         // now begin to resize row content
  120.                         var do_block_resize = function (element, ratio, height) {
  121.                             $(element).each(function () {
  122.                                 var width = Math.floor(ratio * this.width);
  123.  
  124.                                 $(this.img).parents('.imggalitem').css({
  125.                                     'width': width,
  126.                                     'height': height
  127.                                 });
  128.                             });
  129.                         };
  130.  
  131.                         var block_resize = function (element, totalwidth) {
  132.                             var ratio = wrapperwidth / totalwidth,
  133.                                 height = Math.floor(justifiedheight * ratio);
  134.                             do_block_resize(element, ratio, height);
  135.                         };
  136.  
  137.                         $(row).each(function (i) {
  138.                             // get current total width
  139.                             var newelement = this,
  140.                                 totalwidth = 0;
  141.  
  142.                             $(newelement).each(function () {
  143.                                 totalwidth += this.width;
  144.                             });
  145.  
  146.                             if (($(row).length - 1 ) === i) {
  147.                                 // last row, need to check if width we able to make it fullwidth
  148.                                 if ((wrapperwidth / totalwidth) < 1.5) {
  149.                                     block_resize(newelement, totalwidth, i);
  150.                                 } else {
  151.                                     do_block_resize(newelement, 1.10, justifiedheight * 1.1);
  152.                                 }
  153.                             } else {
  154.                                 block_resize(newelement, totalwidth, i);
  155.                             }
  156.                         });
  157.                     }
  158.                 },
  159.  
  160.                 initialize_gallery = function () {
  161.  
  162.                     $(container).imagesLoaded(function () {
  163.  
  164.                         // image loaded check on ie
  165.                         $(".isotopewrapper").checkimageloaded();
  166.  
  167.                         resize_gallery_item_list();
  168.  
  169.                         if (options.gallerytype === 'isotopewrapper') {
  170.                             $(container).isotope({
  171.                                 itemSelector: ".imggalitem",
  172.                                 masonry: {
  173.                                     columnWidth: 1
  174.                                 }
  175.                             });
  176.                         }
  177.  
  178.                         window.setTimeout(function () {
  179.                             $(loader).fadeOut("slow");
  180.                             $.animate_load(options.loadAnimation, container, $(container).find('.imggalitem.notloaded'), function () {
  181.                                 bind_load_more();
  182.                                 $(container).find('.imggalitem').removeClass('notloaded');
  183.                             });
  184.                         }, 500);
  185.  
  186.  
  187.                         if (options.galleryexpand === 'magnific') {
  188.                             $(container).magnificPopup({
  189.                                 type: 'image',
  190.                                 delegate: 'a',
  191.                                 mainClass: 'mfp-fade',
  192.                                 removalDelay: 160,
  193.                                 preloader: false,
  194.                                 gallery: {enabled: true},
  195.                                 callbacks: {
  196.                                     elementParse: function (item) {
  197.  
  198.                                         if ($(item.el).data('type') === 'image') {
  199.                                             item.type = 'image';
  200.                                         } else if ($(item.el).data('type') === 'html5video') {
  201.                                             item.type = 'inline';
  202.  
  203.                                             // video type
  204.                                             var dummyvideotest = "<video></video>",
  205.                                                 canplaymp4 = $(dummyvideotest).get(0).canPlayType("video/mp4"),
  206.                                                 canplaywebm = $(dummyvideotest).get(0).canPlayType("video/webm"),
  207.                                                 canplayogg = $(dummyvideotest).get(0).canPlayType("video/ogg");
  208.  
  209.                                             // options
  210.                                             options = {
  211.                                                 videoWidth: '100%',
  212.                                                 videoHeight: '100%'
  213.                                             };
  214.  
  215.                                             // option video player (force to use flash)
  216.                                             if (!window.joption.ismobile && ((canplaymp4 === 'maybe' || canplaymp4 === '') && (canplaywebm === 'maybe' || canplaywebm === '') && (canplayogg === 'maybe' || canplayogg === ''))) {
  217.                                                 options.mode = 'shim';
  218.                                             }
  219.  
  220.                                             // option feature
  221.                                             options.features = ['playpause', 'progress', 'current', 'duration', 'tracks', 'volume', 'fullscreen'];
  222.  
  223.                                             // exec media element player
  224.                                             $(".html5popup-wrapper video").mediaelementplayer(options);
  225.                                         } else if ($(item.el).data('type') === 'soundcloud-gallery') {
  226.                                             item.type = 'iframe';
  227.                                             item.src = "https://w.soundcloud.com/player/?url=" + encodeURIComponent(item.src);
  228.                                         } else {
  229.                                             item.type = 'iframe';
  230.                                         }
  231.                                     }
  232.                                 }
  233.                             });
  234.                         } else if (options.galleryexpand === 'photoswipe') {
  235.                             // photoswipe
  236.  
  237.                             photoswipe = $(container).find('.imggalitem a[data-type="image"]').photoSwipe({
  238.                                 autoStartSlideshow: options.photoswipeslideautoplay,
  239.                                 slideshowDelay: options.photoswipeslidedelay,
  240.                                 captionAndToolbarShowEmptyCaptions: options.photoswipehidetitle,
  241.                                 imageScaleMethod: options.photoswipescale,
  242.                                 margin: 0,
  243.                                 nextPreviousSlideSpeed: 400,
  244.                                 slideSpeed: 400,
  245.                                 captionAndToolbarOpacity: 1,
  246.                                 captionAndToolbarFlipPosition: true,
  247.                                 getImageSource: function (obj) {
  248.                                     return $(obj).attr('href');
  249.                                 },
  250.                                 getImageCaption: function (obj) {
  251.                                     return $(obj).find('a').attr('title');
  252.                                 }
  253.                             });
  254.  
  255.                             photoswipe.addEventHandler(PhotoSwipe.EventTypes.onHide, function () {
  256.                                 $(window).trigger('resize');
  257.                             });
  258.                         } else if (options.galleryexpand === 'swipebox') {
  259.                             $(container).find('a').swipebox({
  260.                                 useCSS: true,
  261.                                 useSVG: true,
  262.                                 hideBarsOnMobile: true,
  263.                                 hideBarsDelay: 3000,
  264.                                 videoMaxWidth: 1400,
  265.                                 beforeOpen: function () {
  266.                                 },
  267.                                 afterClose: function () {
  268.                                 }
  269.                             });
  270.                         }
  271.                     });
  272.                 },
  273.  
  274.                 do_loadmore = function () {
  275.                     if (curpage < (options.totalpage - 1)) {
  276.                         $(".galleryloadmore").fadeIn();
  277.  
  278.                         $.ajax({
  279.                             url: options.adminurl,
  280.                             type: "post",
  281.                             dataType: "html",
  282.                             data: {
  283.                                 'page': ++curpage,
  284.                                 'action': options.action,
  285.                                 'pageid': options.pageid
  286.                             },
  287.                             success: function (data) {
  288.                                 if (data === '') {
  289.                                     $(".galleryloadmore").fadeOut();
  290.                                 } else {
  291.                                     var $newEls = $(data);
  292.                                     $(container).append($newEls);
  293.                                     $(container).imagesLoaded(function () {
  294.                                         // image loaded check on ie
  295.                                         $(".isotopewrapper").checkimageloaded();
  296.                                         $(".galleryloadmore").fadeOut();
  297.                                         if (options.gallerytype === 'isotopewrapper') {
  298.                                             resize_gallery_item_list();
  299.  
  300.                                             $newEls.each(function(){
  301.                                                 $(this).removeClass('notloaded').addClass('alreadyloaded');;
  302.                                             });
  303.  
  304.                                             $(container).append($newEls).isotope('appended', $newEls);
  305.  
  306.                                             window.setTimeout(function () {
  307.                                                 resize_gallery_item_list();
  308.                                                 $(container).isotope('layout');
  309.                                                 window.setTimeout(function () {
  310.                                                     $(window).trigger('resize');
  311.                                                 }, 2000);
  312.                                                 bind_load_more();
  313.                                             }, 1000);
  314.  
  315.                                             if (options.galleryexpand === 'photoswipe') {
  316.                                                 window.Code.PhotoSwipe.unsetActivateInstance(photoswipe);
  317.                                                 window.Code.PhotoSwipe.detatch(photoswipe);
  318.  
  319.                                                 photoswipe = $(container).find('.imggalitem a[data-type="image"]').photoSwipe({
  320.                                                     autoStartSlideshow: options.photoswipeslideautoplay,
  321.                                                     slideshowDelay: options.photoswipeslidedelay,
  322.                                                     captionAndToolbarShowEmptyCaptions: options.photoswipehidetitle,
  323.                                                     imageScaleMethod: options.photoswipescale,
  324.                                                     margin: 0,
  325.                                                     nextPreviousSlideSpeed: 400,
  326.                                                     slideSpeed: 400,
  327.                                                     captionAndToolbarOpacity: 1,
  328.                                                     captionAndToolbarFlipPosition: true,
  329.                                                     getImageSource: function (obj) {
  330.                                                         return $(obj).attr('href');
  331.                                                     },
  332.                                                     getImageCaption: function (obj) {
  333.                                                         return $(obj).find('img').attr('alt');
  334.                                                     }
  335.                                                 });
  336.  
  337.                                                 photoswipe.addEventHandler(PhotoSwipe.EventTypes.onHide, function () {
  338.                                                     $(window).trigger('resize');
  339.                                                 });
  340.                                             }
  341.  
  342.                                         } else {
  343.                                             $(container).append($newEls);
  344.                                             $(container).find('.imggalitem').removeClass('notloaded');
  345.                                         }
  346.                                     });
  347.                                 }
  348.                             }
  349.                         });
  350.                     }
  351.                 };
  352.  
  353.             var loadmorecheckrange = 100;
  354.             var check_loadmore = function () {
  355.                 if (window.jpobj.globaltop + $(window).height() > $(document).height() - loadmorecheckrange) {
  356.                     $(window).unbind('jscroll', check_loadmore);
  357.                     do_loadmore();
  358.                 }
  359.             };
  360.  
  361.  
  362.             window.setInterval(function(){
  363.                 $("body").append("<div class='meresize'></div>");
  364.                 $(window).trigger('resize');
  365.                 $(".meresize").remove();
  366.                 $(window).trigger('resize');
  367.             }, 4000);
  368.  
  369.  
  370.             var bind_load_more = function () {
  371.                 $(window).bind('jscroll', check_loadmore);
  372.                 check_loadmore();
  373.             };
  374.  
  375.  
  376.             initialize_gallery();
  377.             $(window).bind({
  378.                 resize: function () {
  379.                     resize_gallery_item_list();
  380.                 }
  381.             });
  382.  
  383.         });
  384.     };
  385. })(jQuery, window.Code.PhotoSwipe, window, document);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top