API tools faq
paste
Advertisement
Guest User

jquery.gallerie.js

a guest
May 9th, 2018
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 16.91 KB | None | 0 0
raw download clone embed print report
  1. ;(function($) {
  2.  
  3.     var _body = document.body || document.documentElement,
  4.         _style = _body.style,
  5.         _transition,
  6.         _transform;
  7.        
  8.     // detect support for transition       
  9.     if (_style.transition !== undefined) {
  10.         _transition = 'transition';
  11.     } else if (_style.WebkitTransition !== undefined) {
  12.         _transition = '-webkit-transition';
  13.     } else if (_style.MozTransition !== undefined) {
  14.         _transition = '-moz-transition';
  15.     } else if (_style.MsTransition !== undefined) {
  16.         _transition = '-ms-transition';
  17.     } else if (_style.OTransition !== undefined) {
  18.         _transition = '-o-transition';
  19.     }
  20.    
  21.     // detect support for transform
  22.     if (_style.transform !== undefined) {
  23.         _transform = 'transform';
  24.     } else if (_style.WebkitTransform !== undefined) {
  25.         _transform = '-webkit-transform';
  26.     } else if (_style.MozTransform !== undefined) {
  27.         _transform = '-moz-transform';
  28.     } else if (_style.MsTransform !== undefined) {
  29.         _transform = '-ms-transform';
  30.     } else if (_style.OTransform !== undefined) {
  31.         _transform = '-o-transform';
  32.     }
  33.    
  34.     $.fn.gallerie = function (method) {
  35.        
  36.         function rebuildOverlay(target, imageLinks){
  37.             var $this = $(target),
  38.                 options = $this.data('gallerie')['options'],
  39.                 $overlay = $('<div class="gallerie-overlay"/>'),
  40.                 $imageBox = $('<div class="gallerie-imagebox"/>'),
  41.                 $image = $('<img class="gallerie-image"/>'),
  42.                 $imageLoading = $('<div class="gallerie-loading"/>'),
  43.                 $captionBox = $('<div class="gallerie-captionbox"><div class="gallerie-control gallerie-control-previous">&laquo;</div><div class="gallerie-text"><div class="gallerie-title"/><div class="gallerie-index"/></div><div class="gallerie-control gallerie-control-next">&raquo;</div></div>'),
  44.                 $thumbList = $('<ul></ul>'),
  45.                 $thumbBox = $('<div class="gallerie-thumbbox"/>'),
  46.                 $thumbItem,
  47.                 $imageLink;
  48.            
  49.             $.each(imageLinks, function(index, imageLink) {
  50.            
  51.                 $imageLink = $(imageLink);
  52.                 $thumbItem = $(imageLink).find('img');
  53.            
  54.                 // listbox thumbs
  55.                 $thumbItem = $('<li></li>')
  56.                             .append(
  57.                            
  58.                                 $('<a />').prop({
  59.                                     href: $imageLink.prop('href')
  60.                                 }).append(
  61.                                     $('<img/>').prop({
  62.                                         src: $thumbItem.prop('src'),
  63.                                         title: $thumbItem.prop('title')
  64.                                     })
  65.                                 )
  66.                             );
  67.                 $thumbList.append($thumbItem);
  68.             });
  69.            
  70.             $overlay.append($imageBox.append($image).append($imageLoading))
  71.                     .append($captionBox)
  72.                     .append($thumbBox.append($thumbList));
  73.                    
  74.                    
  75.             $overlay.on('click.gallerie', function(event){
  76.                 $this.gallerie('close');
  77.             });
  78.            
  79.             $overlay.on('click.gallerie', '.gallerie-control-previous', function(event){
  80.                 $this.gallerie('previous');
  81.                 return false;
  82.             });
  83.            
  84.             $overlay.on('click.gallerie', '.gallerie-control-next', function(event){
  85.                 $this.gallerie('next');
  86.                 return false;
  87.             });
  88.        
  89.        
  90.             var scrollHover = 0;
  91.            
  92.             $thumbBox.mousemove(function(event){
  93.            
  94.                 var triggerWidth = options['thumbboxTriggerWidth'],
  95.                     thumbboxWidth = $thumbList.outerWidth(),
  96.                     windowWidth = $(window).width();
  97.            
  98.                 // adjust triggerWidth to pixels if it is a percentage
  99.                 if (triggerWidth < 1)
  100.                         triggerWidth = windowWidth * triggerWidth;
  101.            
  102.                 var oldHover = scrollHover;
  103.                 if (event.pageX < triggerWidth) {
  104.                     scrollHover = 0;
  105.                 } else if (windowWidth - event.pageX < triggerWidth) {
  106.                     scrollHover = 1;
  107.                 } else {
  108.                     scrollHover = -1;
  109.                 }
  110.            
  111.                 if (oldHover != scrollHover) {
  112.                
  113.                     scrollStop($thumbList);
  114.                
  115.                     if (scrollHover < 0)
  116.                         return;
  117.                        
  118.                     var oldLeft=0,
  119.                         newLeft,
  120.                         travelAmount;
  121.                    
  122.                    
  123.                     if (_transform !== undefined && _transition !== undefined) {
  124.                         // get current transform
  125.                         var matrix = $thumbList.css(_transform),
  126.                         marray = matrixToArray(matrix);
  127.                         if (marray.length > 4) {
  128.                             oldLeft = parseInt(marray[4]);
  129.                         }
  130.                        
  131.                     } else {
  132.                         oldLeft = parseInt($thumbList.css('left'),10);
  133.                     }
  134.                    
  135.                     newLeft = -(scrollHover * thumbboxWidth) + (windowWidth * scrollHover);
  136.                     travelAmount = Math.abs(newLeft - oldLeft);
  137.                    
  138.                     scrollAnimate($thumbList, newLeft, {
  139.                         duration: travelAmount * 1/options['thumbboxSpeed'],
  140.                         easing: 'linear'
  141.                     });
  142.                 }
  143.  
  144.             }).mouseleave(function(event){
  145.                 scrollStop($thumbList);
  146.                 scrollHover = -1;
  147.             });
  148.                        
  149.            
  150.             $overlay.find('.gallerie-thumbbox li').on('click.gallerie', function(event){
  151.                 var imageLink = $(this).find('a:first')[0];
  152.                 $this.gallerie('open', imageLink);
  153.                 event.preventDefault();
  154.                 event.stopPropagation();
  155.                
  156.             }).hover(function(){
  157.                 $(this).addClass('gallerie-thumbbox-hover');
  158.             }, function(){
  159.                 $(this).removeClass('gallerie-thumbbox-hover');
  160.             });
  161.            
  162.             // remove any old overlays
  163.             $this.find('.gallerie-overlay').remove();
  164.             $this.append($overlay.hide());
  165.            
  166.             return $overlay;
  167.            
  168.         }
  169.        
  170.         function matrixToArray(matrix) {
  171.             var marray = matrix.substr(7, matrix.length - 8).split(',');
  172.             return marray;
  173.         }
  174.        
  175.         function scrollStop($element) {
  176.             // transition support
  177.             if (_transition !== undefined) {
  178.                 var css = {};
  179.                
  180.                 // transform support
  181.                 if (_transform !== undefined) {
  182.                     // get current transform
  183.                     var matrix = $element.css(_transform),
  184.                         marray = matrixToArray(matrix);
  185.                     css[_transform] = 'translate('+marray[4]+'px)';
  186.                     css[_transition] = _transform +' 0ms';
  187.                 } else {
  188.                     css['left'] = $element.css('left');
  189.                     css[_transition] = 'left 0ms';
  190.                 }
  191.                
  192.                 $element.css(css);
  193.                
  194.             }else { // jquery animations
  195.                 $element.clearQueue().stop();
  196.             }
  197.         }
  198.        
  199.         function scrollAnimate($element, leftPos, options) {
  200.        
  201.             // transition support
  202.             if (_transition !== undefined) {
  203.            
  204.                 if (options['easing'] == undefined) {
  205.                     options['easing'] = 'ease';
  206.                 }
  207.                
  208.                 var css  = {};
  209.                
  210.                 // transform support
  211.                 if (_transform !== undefined) {
  212.                     css[_transform] = 'translate('+leftPos+'px)';
  213.                     css[_transition] = _transform +' '+ options.duration + 'ms ' + options['easing'];
  214.                 } else {
  215.                     css['left'] = leftPos;
  216.                     css[_transition] = 'left '+ options.duration + 'ms ' + options['easing'];
  217.                 }
  218.                
  219.                 $element.css(css);
  220.                
  221.             } else { // default to using jQuery's animate
  222.                 $element.animate({
  223.                     left: leftPos,
  224.                 }, options);
  225.             }
  226.         }
  227.        
  228.         function displayLoadedImage(targets) {
  229.        
  230.             // unwrap if target is event
  231.             if (targets instanceof $.Event) {
  232.                 targets = targets['data'];
  233.             }
  234.        
  235.             var preloadImage = targets['preloadImage'],
  236.                 $image = targets['$image'],
  237.                 $imageBox = $image.closest('.gallerie-imagebox');
  238.                 $imageLoading = targets['$imageLoading'],
  239.                 maxWidth = $imageBox.width() - $image.outerWidth() + $image.width(),
  240.                 maxHeight = $imageBox.height() - $image.outerHeight() + $image.height(),
  241.                 height=0,
  242.                 width=0;
  243.        
  244.             if (preloadImage != $image.data('preloadImage'))
  245.                 return;
  246.            
  247.             // adjust width and height according to determined maxWidth
  248.             width = preloadImage.width > maxWidth ? maxWidth : preloadImage.width;
  249.             height = preloadImage.height * width / preloadImage.width;
  250.            
  251.             // if height still too big, use maxHeight scale width & height
  252.             if (height > maxHeight) {
  253.                 height = maxHeight;
  254.                 width = preloadImage.width * height / preloadImage.height;
  255.             }
  256.        
  257.             // load the target image
  258.             $image.prop({
  259.                 src: preloadImage.src,
  260.                 title: preloadImage.title
  261.             }).css({
  262.                 width: width,
  263.                 height: height
  264.             }).removeClass('loading');
  265.    
  266.             $imageLoading.hide();
  267.         }
  268.        
  269.         // public methods
  270.         var methods = {
  271.                
  272.             init : function (options) {
  273.                
  274.                 var defaults = {
  275.                     thumbboxTriggerWidth: 0.10,
  276.                     thumbboxSpeed: 0.5,
  277.                     imageEvent: 'click',
  278.                     elem: 'a',
  279.                     wrapAround: true
  280.                 };
  281.                
  282.                 var options =  $.extend(defaults, options);
  283.                
  284.                 return this.each(function(){
  285.                    
  286.                     var $this = $(this),
  287.                         plugindata = $this.data('gallerie');
  288.                    
  289.                     // if plugin has not been initialized on element
  290.                     if (!plugindata) {
  291.                        
  292.                         $this.data('gallerie', {
  293.                             options: options,
  294.                             target: $this,
  295.                         });
  296.                        
  297.                         // load image data
  298.                         $this.gallerie('load', options['elem']);
  299.                        
  300.                         // set to the first image
  301.                         $this.gallerie('setImage', 1);
  302.                     }
  303.                    
  304.                 });
  305.                
  306.             },
  307.            
  308.            
  309.             setImage: function(imageLink){
  310.                 return this.each(function(){
  311.                
  312.                     var $this = $(this),
  313.                         options = $this.data('gallerie')['options'],
  314.                         $overlay = $this.find('.gallerie-overlay'),
  315.                         $thumbBox = $this.find('.gallerie-thumbbox'),
  316.                         $captionBox = $this.find('.gallerie-captionbox'),
  317.                         $thumbList = $thumbBox.find('ul:first'),
  318.                         linkType = $.type(imageLink),
  319.                         $imageLink,
  320.                         $image,
  321.                         preloadImage,
  322.                         $imageLoading;
  323.                    
  324.                     // if image is a number, we consider it the index of the target thumb
  325.                     if (linkType == 'number') {
  326.                         imageLink = $thumbList.find('li a')[imageLink-1];
  327.                     } else if (linkType == 'string') {
  328.                         imageLink = $('<a/>').prop('href', imageLink)[0];
  329.                     }
  330.                    
  331.                     // we assume it is a link otherwise
  332.                     $imageLink = $(imageLink);
  333.                     $image = $overlay.find('.gallerie-image');
  334.                     $imageLoading = $overlay.find('.gallerie-loading');
  335.                    
  336.                     $image.addClass('loading');
  337.                    
  338.                     // construct new image element to work-around onLoad issues with various browsers
  339.                     preloadImage = new Image();
  340.                     var targetData = {
  341.                         'preloadImage': preloadImage,
  342.                         '$image': $image,
  343.                         '$imageLoading': $imageLoading
  344.                     };
  345.                    
  346.                     // when image has loaded, call displayLoadedImage to update real image to preloadImage
  347.                     $(preloadImage).on('load.gallerie', targetData, displayLoadedImage);
  348.                     $image.data('preloadImage', preloadImage);
  349.                     preloadImage.src = $imageLink.prop('href');
  350.                    
  351.                     // give the image 250ms to load before showing imageLoading (lowers flicker chance of imageLoading)
  352.                     setTimeout(function(){
  353.                         // image still has not loaded, so we show imageLoading
  354.                         if (!preloadImage.complete) {
  355.                             $imageLoading.show();
  356.                            
  357.                             // hide image loading if target already loaded while showing imageLoading
  358.                             if (preloadImage.complete) {
  359.                                 displayLoadedImage(targetData);
  360.                             }
  361.                         }
  362.                     }, 250);
  363.                    
  364.                     // attempt to find link in thumbnails
  365.                     var $thumbLink = $thumbBox.find(imageLink),
  366.                         $targetThumb;
  367.                        
  368.                    
  369.                     // could not find same link element, so we search by href
  370.                     if ($thumbLink.length == 0) {
  371.                         var imageLinkHref = $imageLink.prop('href');
  372.                         $thumbBox.find('a').each(function(index, elem) {
  373.                             if ($(elem).prop('href') == imageLinkHref) {
  374.                                 $thumbLink = $(elem);
  375.                                 return false;
  376.                             }
  377.                         });
  378.                     }
  379.                    
  380.                     $targetThumb = $thumbLink.closest('li');
  381.                    
  382.                     // remove selected from old thumb
  383.                     $thumbBox.find('.gallerie-thumbbox-selected').removeClass('gallerie-thumbbox-selected');
  384.                    
  385.                     // add selected to new thumb
  386.                     $targetThumb.addClass('gallerie-thumbbox-selected');
  387.                    
  388.                     var $thumbs = $thumbBox.find('li'),
  389.                         thumbPosition = $thumbs.index($targetThumb)+1,
  390.                         thumbTotal = $thumbs.length;
  391.                    
  392.                     // set caption
  393.                     $captionBox.find(".gallerie-title").text($targetThumb.find('img').prop('title'));
  394.                     $captionBox.find(".gallerie-index").text(thumbPosition + ' of ' + thumbTotal);
  395.                    
  396.                     var thumbpos = $targetThumb.position().left + $targetThumb.outerWidth(true)/2,
  397.                         winwidth = $(window).width();
  398.                    
  399.                     if ($targetThumb.offset().left < 0 || thumbpos > winwidth) {
  400.                         // calculate new left edge of thumblist
  401.                         var newLeft = -(winwidth/2 - thumbpos);
  402.                        
  403.                         // if edge is beyond normal scrolling bounds, bring it to within bounds
  404.                         newLeft = Math.max(0, newLeft);
  405.                         newLeft = Math.min($thumbList.outerWidth() - winwidth, newLeft);
  406.                        
  407.                         // clear queue of effects (otherwise backlog happens when user advances quickly)
  408.                         $thumbList.clearQueue();
  409.                        
  410.                         // animate scroll to the position
  411.                         scrollAnimate($thumbList, -newLeft, {'duration': 1000});
  412.                     }
  413.                    
  414.                    
  415.                 });
  416.             },
  417.            
  418.             isOpen : function() {
  419.                 var $this = $(this[0]),
  420.                     $overlay = $this.find('.gallerie-overlay');
  421.                    
  422.                 return $overlay.is(':visible');
  423.             },
  424.            
  425.             open : function(imageLink){
  426.                 return this.each(function(){
  427.                     var $this = $(this),
  428.                         options = $this.data('gallerie')['options'],
  429.                         $overlay = $this.find('.gallerie-overlay'),
  430.                         $imageBox = $this.find('.gallerie-imagebox'),
  431.                         $captionBox = $this.find('.gallerie-captionbox'),
  432.                         $thumbBox = $this.find('.gallerie-thumbbox');
  433.                    
  434.                     if ($overlay.is(':hidden')) {
  435.                         $(document).on('keyup.gallerie', function(e) {
  436.                             if (e.keyCode == 13 || e.keyCode == 27) {
  437.                                 $this.gallerie('close');
  438.                             } else if (e.keyCode == 37) {
  439.                                 $this.gallerie('previous');
  440.                             } else if (e.keyCode == 39) {
  441.                                 $this.gallerie('next');
  442.                             }
  443.                         });
  444.                        
  445.                         // remove scrollbar from window
  446.                         $('body').css({ overflow: 'hidden' });
  447.                        
  448.                         // resize imagebox to fill void not filled by captionBox and thumbBox
  449.                         $imageBox.css({height: $overlay.height() - $captionBox.outerHeight() - $thumbBox.outerHeight() - parseInt($imageBox.css('margin-bottom'), 10) - parseInt($imageBox.css('margin-top'), 10)});
  450.                        
  451.                     }
  452.                
  453.                     $overlay.fadeIn(500, function(){
  454.                         if (imageLink) {
  455.                             $this.gallerie('setImage', imageLink);
  456.                         }  
  457.                     });
  458.                 });
  459.             },
  460.            
  461.             close : function(){
  462.                 return this.each(function(){
  463.                     $(this).find('.gallerie-overlay').hide();
  464.                     $(document).off('keyup.gallerie');
  465.                    
  466.                     // restore window scrollbar, etc
  467.                     $("body").css({ overflow: 'inherit' });
  468.                 });
  469.             },
  470.            
  471.             next : function(){
  472.                 return this.each(function(){
  473.                     var $this = $(this),
  474.                         options = $this.data('gallerie')['options'],
  475.                         $thumbBox = $this.find('.gallerie-thumbbox');
  476.                        
  477.                     var $selectedItem = $thumbBox.find('.gallerie-thumbbox-selected'),
  478.                         $nextItem = $selectedItem.next();
  479.                        
  480.                     if ($nextItem.length == 0) {
  481.                         if (!options['wrapAround']) {
  482.                             return;
  483.                         }
  484.                    
  485.                         $nextItem = $thumbBox.find('li:first');
  486.                     }
  487.                    
  488.                     $this.gallerie('setImage', $nextItem.find('a'));
  489.                 });
  490.             },
  491.            
  492.             previous : function(){
  493.                 return this.each(function(){
  494.                     var $this = $(this),
  495.                         options = $this.data('gallerie')['options'],
  496.                         $thumbBox = $this.find('.gallerie-thumbbox');
  497.                        
  498.                     var $selectedItem = $thumbBox.find('.gallerie-thumbbox-selected'),
  499.                         $prevItem = $selectedItem.prev();
  500.                        
  501.                     if ($prevItem.length == 0) {
  502.                         if (!options['wrapAround']) {
  503.                             return;
  504.                         }
  505.                        
  506.                         $prevItem = $thumbBox.find('li:last');
  507.                     }
  508.                    
  509.                     $this.gallerie('setImage', $prevItem.find('a'));
  510.                 });
  511.             },
  512.            
  513.             load: function(elem){
  514.                 return this.each(function(){
  515.                     var $this = $(this),
  516.                         options = $this.data('gallerie')['options'];
  517.                        
  518.                     if (elem === undefined) {
  519.                         elem = options['elem'];
  520.                     }
  521.                        
  522.                     rebuildOverlay(this, $this.find(elem).toArray());
  523.                    
  524.                     $(document).on(options['imageEvent'] + '.gallerie', elem, function(e){
  525.                         $this.gallerie('open', this);
  526.                         e.stopPropagation();
  527.                         e.preventDefault();
  528.                     });
  529.                 });
  530.             },
  531.            
  532.             option: function(key, value) {
  533.                
  534.                 var newOptions = {};
  535.                
  536.                 if (value === undefined && $.type(key) != 'string') {
  537.                     newOptions = key;
  538.                 } else if (value === undefined) {
  539.                     return $(this[0]).data('gallerie')['options'][key];
  540.                 } else {
  541.                     newOptions = {}
  542.                     newOptions[key] = value;
  543.                 }
  544.            
  545.                 return this.each(function(){
  546.                     var $this = $(this),
  547.                         data = $this.data('gallerie'),
  548.                         options = data['options'];
  549.                    
  550.                     $.each(newOptions, function(key, value){
  551.                         if (key == 'elem' || key == 'imageEvent') {
  552.                             // unbind old events
  553.                             $(document).off(options['imageEvent'] + '.gallerie', options['elem']);
  554.                    
  555.                             // update option
  556.                             options[key] = value;
  557.                        
  558.                             // rebind with new option
  559.                             $(document).on(options['imageEvent'] + '.gallerie', options['elem'], function(e){
  560.                                 $this.gallerie('open', this);
  561.                                 e.stopPropagation();
  562.                                 e.preventDefault();
  563.                             });
  564.                        
  565.                         } else if (key in options) {
  566.                             options[key] = value;
  567.                         }
  568.                     });
  569.                    
  570.                     data['options'] = options;
  571.                     $this.data('gallerie', data);
  572.                        
  573.                 });
  574.             }
  575.         };
  576.        
  577.         // handle accessing of public methods
  578.         // this is essentially bootstrapping this plugin
  579.         if ( methods[method] ) {
  580.           return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
  581.         } else if ( typeof method === 'object' || ! method ) {
  582.           return methods.init.apply( this, arguments );
  583.         } else {
  584.           $.error( 'Method ' +  method + ' does not exist on jQuery.gallerie' );
  585.         }
  586.     }
  587. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!