SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with SUPERSIZED

    Friends, I am using the plugin Supersized (http://www.buildinternet.com/project/supersized/) on that site (http://www.casualstreet.com.br/lookbook/) and made ​​some modifications to be able to click on each of the models.

    What I want to do is be able to define a link to each one. Can you help me?

    I'm doing well, but it did not work:

    HTML Code:
    for(var i=0; i<=1 ; i++){
                var contentWrapper = $('<a href="'+base.options.slides[vars.current_slide][0].tooltips[i].url+'" class="content-wrapper"></a>');
    }

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi Felipe,

    I'm afraid don't quite understand your question.

    You seem to have successfully implemented the plugin and the slideshow seems to be working.
    But what do you mean by "define a link to each one"?

    Currently when I hover over the respective models, a plus sign appears.
    When I hover over the plus sign, some more information gets displayed.
    Where should a link go and what should it link to?

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    When you hover the mouse over each model, beyond the sign "+" that appears you can see that there is a link (anchor) in the image. I want to be able to change that link.

    Something like this:

    HTML Code:
    tooltips : [
                 { items: [{name:'camisa est. seda pura', reference:'10843'},{name:'blazer couro croco ecol.', reference:'10753'},{name:'calça jeans flaire det. lateral', reference:'10855'},{name:'bolsa', reference:'10737'},{name:'cinto dupla face', reference:'10734'}], posX:'95%', posY:'20%', url: 'http://google.com/'}, 
                 { items: [{name:'tubo seda pura apache', reference:'10845'},{name:'carteira croco', reference:'10534'},{name:'pulseira', reference:'10793'}], posX:'84%', posY:'20%', url: 'http://google.com/'}
    ]
    Supersized adapted for displaying tooltips: http://www.casualstreet.com.br/js/su...ed-lookbook.js

  4. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Felipe Turquize View Post
    When you hover the mouse over each model, beyond the sign "+" that appears you can see that there is a link (anchor) in the image. I want to be able to change that link.
    Nope. Not seeing that.

    Screenshot:

    Felipe.png

    Source:

    Code:
    <div class="tooltip" style="position: absolute; left: 95%; top: 20%; display: none;">
      <a href="#">Ver Referência</a>
      <div class="tooltip-box" style="display: none;">
        <div>
          <p class="item-name">camisa est. seda pura</p>
          <p class="item-reference">ref. 10843</p>
        </div>
        ...
      </div>
    </div>
    Do you mean <a href="#">Ver Referência</a> ?

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This:

    HTML Code:
    <div class="wrapper" style="width: 2031.9148936170213px; left: -56px;"><img src="/img/fotos_lookbook/foto_lookbook_1.jpg" style="height: 955px; width: 2031.9148936170213px;">
    
    <a href="#" class="content-wrapper" style="width: 406.3829787234043px; left: 772.1599999999999px;"><div class="tooltip" style="position: absolute; left: 95%; top: 20%; display: block;"><a href="#">Ver Referência</a><div class="tooltip-box"><div><p class="item-name">camisa est. seda pura</p><p class="item-reference">ref. 10843</p></div><div><p class="item-name">blazer couro croco ecol.</p><p class="item-reference">ref. 10753</p></div><div><p class="item-name">calça jeans flaire det. lateral</p><p class="item-reference">ref. 10855</p></div><div><p class="item-name">bolsa</p><p class="item-reference">ref. 10737</p></div><div><p class="item-name">cinto dupla face</p><p class="item-reference">ref. 10734</p></div></div></div></a>
    
    <a href="#" class="content-wrapper right" style="width: 406.3829787234043px; left: 772.1599999999999px;"><div class="tooltip" style="position: absolute; left: 84%; top: 20%; display: none;"><a href="#">Ver Referência</a><div class="tooltip-box"><div><p class="item-name">tubo seda pura apache</p><p class="item-reference">ref. 10845</p></div><div><p class="item-name">carteira croco</p><p class="item-reference">ref. 10534</p></div><div><p class="item-name">pulseira</p><p class="item-reference">ref. 10793</p></div></div></div></a>
    
    </div>
    <a href="#" class="content-wrapper" and a <href="#" class="content-wrapper right"

  6. #6
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Oh, ok.
    So are you creating those anchor tags in your modified version of the plugin, or is the original plugin creating those for you?

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By default Supersized creates the link, but for the entire image.

    In this modified version is a link (anchor, I want to be able to change) to each div under each of the models. Understand?

  8. #8
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ok, well back to the original problem.
    You want to alter where those links point to, right?

    Can't you just do:

    Code:
    $(".content-wrapper").each(function(){
      this.href = //whatever;
    });

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, but the links need to be different for each image. = /

  10. #10
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Where are the links defined?
    Which format do they need to have?

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By default is set so for the whole image:

    HTML Code:
    slides    :   [	{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
    			{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}
    ]
    But as the script is modified think should be done something like this:

    HTML Code:
    tooltips : [
                 { items: [{name:'camisa est. seda pura', reference:'10843'},{name:'blazer couro croco ecol.', reference:'10753'},{name:'calça jeans flaire det. lateral', reference:'10855'},{name:'bolsa', reference:'10737'},{name:'cinto dupla face', reference:'10734'}], posX:'95%', posY:'20%', url: 'http://google.com/'}, 
                 { items: [{name:'tubo seda pura apache', reference:'10845'},{name:'carteira croco', reference:'10534'},{name:'pulseira', reference:'10793'}], posX:'84%', posY:'20%', url: 'http://google.com/'}
    ]
    Correct?

  12. #12
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    That seems reasonable.

    Why don't you save the tooltips as an array, outside of your supersize initialization code.
    That way you can just pass in a variable when you start the plugin:

    Code:
    tooltips= [
      {
    ]
    
    $.supersized({
       ... lots of options ...
      tooltips: tooltips
    }
    Then afterwards, you can loop through all of the elements with a class of ".content-wrapper" and set their href attribute accordingly:

    Code:
    $(".content-wrapper").each(function(index){
      this.href = tooltips[index].url // or similar
    });

  13. #13
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should not I create an array with all the slides?

    HTML Code:
    slides 					:  	[			// Slideshow Images																						
    					
    					                                    //inicio foto 1
    					
    														[
    															{
    																image : '/img/fotos_lookbook/foto_lookbook_1.jpg', 
    																tooltips : [
    																	{ items: [{name:'camisa est. seda pura', reference:'10843'},{name:'blazer couro croco ecol.', reference:'10753'},{name:'calça jeans flaire det. lateral', reference:'10855'},{name:'bolsa', reference:'10737'},{name:'cinto dupla face', reference:'10734'}], posX:'95%', posY:'20%'}, 
    																	{ items: [{name:'tubo seda pura apache', reference:'10845'},{name:'carteira croco', reference:'10534'},{name:'pulseira', reference:'10793'}], posX:'84%', posY:'20%', url: 'http://bla'}
    																] 
    															}								
    														],
    														
    														//fim
    														
    														
    														//inicio foto 2
    					
    														[
    															{
    																image : '/img/fotos_lookbook/foto_lookbook_2.jpg', 
    																tooltips : [
    																	{ items: [{name:'parka tencel militar', reference:'10691'},{name:'regata cetim', reference:'10745'},{name:'calça montaria c/couro', reference:'10833'},{name:'bolsa', reference:'10774'},{name:'lenço onça', reference:'10859'},{name:'gargantilha', reference:'10779'}], posX:'90%', posY:'20%'}, 
    																	{ items: [{name:'camisa est. seda pura', reference:'10843'},{name:'calça veludo skinny', reference:'10877'},{name:'cinto dupla face', reference:'10734'},{name:'colar', reference:'10776'}], posX:'84%', posY:'20%', url: 'http://bla'}
    																] 
    															}								
    														]
    ]
    Can you give me an example, I'm terrible with jQuery. Most of this change was made by a developer I hired.

  14. #14
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ok, well, I'm a bit tied up this afternoon, but leave it with me and I'll see what I can come up with later.

  15. #15
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you.

  16. #16
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi Felipe,

    I ended up altering the plugin, so that you can specifiy the url as an additional parameter.

    So, keep your slides like you had them, e.g.

    Code:
    //inicio foto 1
    [
    	{
    		image : '/img/fotos_lookbook/foto_lookbook_1.jpg', 
    		tooltips : [
    			{ items: [{name:'camisa est. seda pura', reference:'10843'},{name:'blazer couro croco ecol.', reference:'10753'},{name:'calça jeans flaire det. lateral', reference:'10855'},{name:'bolsa', reference:'10737'},{name:'cinto dupla face', reference:'10734'}], posX:'95%', posY:'20%', url: 'http://google.com/'}, 
    			{ items: [{name:'tubo seda pura apache', reference:'10845'},{name:'carteira croco', reference:'10534'},{name:'pulseira', reference:'10793'}], posX:'84%', posY:'20%', url: 'http://sitepoint.com/'}
    		] 
    	}								
    ],
    //fim
    And replace the contents of the file http://www.casualstreet.com.br/js/su...ed-lookbook.js, with this (making a backup first):

    Code:
    /*
    
    	Supersized - Fullscreen Slideshow jQuery Plugin - adapted for displaying tooltips
    	Version : 3.2.7
    	Site	: www.buildinternet.com/project/supersized
    	
    	Author	: Sam Dunn
    	Company : One Mighty Roar (www.onemightyroar.com)
    	License : MIT License / GPL License
    	
    */
    
    (function($){
    
    	/* Place Supersized Elements
    	----------------------------*/
    	$(document).ready(function() {
    		$('body .content').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
    	});
    		
    		
    		$.supersized = function(options){
    			
    			/* Variables
    		----------------------------*/
    			var el = '#supersized',
    					base = this;
    				// Access to jQuery and DOM versions of element
    				base.$el = $(el);
    				base.el = el;
    				vars = $.supersized.vars;
    				// Add a reverse reference to the DOM object
    				base.$el.data("supersized", base);
    				api = base.$el.data('supersized');
    		
    		base.init = function(){
    					// Combine options and vars
    					$.supersized.vars = $.extend($.supersized.vars, $.supersized.themeVars);
    					$.supersized.vars.options = $.extend({},$.supersized.defaultOptions, $.supersized.themeOptions, options);
    						base.options = $.supersized.vars.options;
    						
    						base._build();
    				};
    				
    				
    				/* Build Elements
    		----------------------------*/
    				base._build = function(){
    					// Add in slide markers
    					var thisSlide = 0,
    						slideSet = '',
    				markers = '',
    				markerContent,
    				thumbMarkers = '',
    				thumbImage;
    				
    			while(thisSlide <= base.options.slides.length-1){
    				//Determine slide link content
    				switch(base.options.slide_links){
    					case 'num':
    						markerContent = thisSlide;
    						break;
    					case 'name':
    						markerContent = base.options.slides[thisSlide].title;
    						break;
    					case 'blank':
    						markerContent = '';
    						break;
    				}
    				
    				slideSet = slideSet+'<li class="slide-'+thisSlide+'"></li>';
    				
    				if(thisSlide == base.options.start_slide-1){
    					// Slide links
    					if (base.options.slide_links)markers = markers+'<li class="slide-link-'+thisSlide+' current-slide"><a>'+markerContent+'</a></li>';
    					// Slide Thumbnail Links
    					if (base.options.thumb_links){
    						base.options.slides[thisSlide].thumb ? thumbImage = base.options.slides[thisSlide].thumb : thumbImage = base.options.slides[thisSlide].image;
    						thumbMarkers = thumbMarkers+'<li class="thumb'+thisSlide+' current-thumb"><img src="'+thumbImage+'"/></li>';
    					};
    				}else{
    					// Slide links
    					if (base.options.slide_links) markers = markers+'<li class="slide-link-'+thisSlide+'" ><a>'+markerContent+'</a></li>';
    					// Slide Thumbnail Links
    					if (base.options.thumb_links){
    						base.options.slides[thisSlide].thumb ? thumbImage = base.options.slides[thisSlide].thumb : thumbImage = base.options.slides[thisSlide].image;
    						thumbMarkers = thumbMarkers+'<li class="thumb'+thisSlide+'"><img src="'+thumbImage+'"/></li>';
    					};
    				}
    				thisSlide++;
    			}
    			
    			if (base.options.slide_links) $(vars.slide_list).html(markers);
    			if (base.options.thumb_links && vars.thumb_tray.length){
    				$(vars.thumb_tray).append('<ul id="'+vars.thumb_list.replace('#','')+'">'+thumbMarkers+'</ul>');
    			}
    			
    			$(base.el).append(slideSet);
    			
    			// Add in thumbnails
    			if (base.options.thumbnail_navigation){
    				// Load previous thumbnail
    				vars.current_slide - 1 < 0  ? prevThumb = base.options.slides.length - 1 : prevThumb = vars.current_slide - 1;
    				$(vars.prev_thumb).show().html($("<img/>").attr("src", base.options.slides[prevThumb].image));
    				
    				// Load next thumbnail
    				vars.current_slide == base.options.slides.length - 1 ? nextThumb = 0 : nextThumb = vars.current_slide + 1;
    				$(vars.next_thumb).show().html($("<img/>").attr("src", base.options.slides[nextThumb].image));
    			}
    			
    						base._start(); // Get things started
    				};
    				
    				
    				/* Initialize
    		----------------------------*/
    			base._start = function(){
    			
    			// Determine if starting slide random
    			if (base.options.start_slide){
    				vars.current_slide = base.options.start_slide - 1;
    			}else{
    				vars.current_slide = Math.floor(Math.random()*base.options.slides.length);	// Generate random slide number
    			}
    			
    			// If links should open in new window
    			var linkTarget = base.options.new_window ? ' target="_blank"' : '';
    			
    			// Set slideshow quality (Supported only in FF and IE, no Webkit)
    			if (base.options.performance == 3){
    				base.$el.addClass('speed'); 		// Faster transitions
    			} else if ((base.options.performance == 1) || (base.options.performance == 2)){
    				base.$el.addClass('quality');	// Higher image quality
    			}
    						
    			// Shuffle slide order if needed		
    			if (base.options.random){
    				arr = base.options.slides;
    				for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);	// Fisher-Yates shuffle algorithm (jsfromhell.com/array/shuffle)
    					base.options.slides = arr;
    			}
    			
    			/*-----Load initial set of images-----*/
    	
    			if (base.options.slides.length > 1){
    				if(base.options.slides.length > 2){
    					// Set previous image
    					vars.current_slide - 1 < 0  ? loadPrev = base.options.slides.length - 1 : loadPrev = vars.current_slide - 1;	// If slide is 1, load last slide as previous
    					var imageLink = (base.options.slides[loadPrev].url) ? "href='" + base.options.slides[loadPrev].url + "'" : "";
    					
    					var wrapper = $('<div class="wrapper"></div>');
    					var slidePrev = base.el+' li:eq('+loadPrev+')';
    					wrapper.appendTo(slidePrev);
    				
    					var imgPrev = $('<img src="'+base.options.slides[loadPrev][0].image+'"/>');
    					if(base.options.slides[loadPrev].length>1){
    					var imgPrev2 = $('<img src="'+base.options.slides[loadPrev][1].image+'"/>');}
    					
    					//FINAL
    					var contentWrapper = $('<a href="' + base.options.slides[loadPrev][0].tooltips[0].url + '" class="content-wrapper"></a>');
    				
    					imgPrev.appendTo(wrapper).parent().parent().addClass('image-loading prevslide');
    					if(base.options.slides[loadPrev].length>1){
    					imgPrev2.appendTo(wrapper).wrap('<a href="#" class="content-wrapper"></a>');}
    					contentWrapper.appendTo(wrapper);
    				
    					var newContentWrapper = $('<a href="' + base.options.slides[loadPrev][0].tooltips[1].url + '" class="content-wrapper"></a>');
    					newContentWrapper.addClass('right').appendTo(wrapper);
    
    					imgPrev.load(function(){
    						$(this).data('origWidth', $(this).width()).data('origHeight', $(this).height());
    						//base.resizeNow();	// Resize background image
    					});	// End Load
    					
    					//Include tooltips on image
    					if(base.options.tooltips){
    						base._includeTooltip(loadPrev,slidePrev);
    						
    							/*thisTooltip = base.options.slides[loadPrev][0].tooltips;
    							tooltip = $('<div><a href="#">Ver Referência</a></div>');
    							tooltip.appendTo(slidePrev+' .content-wrapper:eq(0)').addClass('tooltip').css({'position': 'absolute', left: thisTooltip.posX, top: thisTooltip.posY});
    							tooltipContent = '<div class="tooltip-box"><ul>';
    							for(var k=0; k < thisTooltip.objects.length(); k++){
    								tooltipContent += '<li><p class="item-name">'+thisTooltip.objects[k].name+'</p><p class="item-reference">'+thisTooltip.objects[k].reference+'</p></li>';
    							}
    							tooltipContent += '</ul></div>';
    							
    							$(tooltipContent).appendTo(tooltip);
    							thisTooltip = base.options.slides[loadPrev][1].tooltips;
    							tooltip = $('<div><a href="#">Ver Referência</a></div>');
    							tooltip.appendTo(slidePrev+' .content-wrapper:eq(1)').addClass('tooltip').css({'position': 'absolute', left: thisTooltip.posX, top: thisTooltip.posY});
    							tooltipContent = '<div class="tooltip-box"><ul>';
    							for(var k=0; k < thisTooltip.objects.length(); k++){
    								tooltipContent += '<li><p class="item-name">'+thisTooltip.objects[k].name+'</p><p class="item-reference">'+thisTooltip.objects[k].reference+'</p></li>';
    							}
    							tooltipContent += '</ul></div>';
    							
    							$(tooltipContent).appendTo(tooltip);*/
    					}
    				}
    			} else {
    				// Slideshow turned off if there is only one slide
    				base.options.slideshow = 0;
    			}
    			
    			// Set current image
    			imageLink = (api.getField('url')) ? "href='" + api.getField('url') + "'" : "";
    			var img = $('<img src="'+base.options.slides[vars.current_slide][0].image+'"/>');
    			
    			var slideCurrent= base.el+' li:eq('+vars.current_slide+')';
    			
    			var wrapper = $('<div class="wrapper"></div>');
    			wrapper.appendTo(slideCurrent);
    			
    			//FIRST
    			var contentWrapper = $('<a href="' + base.options.slides[vars.current_slide][0].tooltips[0].url + '" class="content-wrapper"></a>');
    					
    			img.appendTo(wrapper).parent().parent().addClass('image-loading activeslide');
    			contentWrapper.appendTo(wrapper);
    			
    			var newContentWrapper = $('<a href="' + base.options.slides[vars.current_slide][0].tooltips[1].url + '" class="content-wrapper"></a>');
    			newContentWrapper.addClass('right').appendTo(wrapper);
    			
    			img.load(function(){
    				base._origDim($(this));
    				//base.resizeNow();	// Resize background image
    				base.launch();
    				if( typeof theme != 'undefined' && typeof theme._init == "function" ) theme._init();	// Load Theme
    			});
    			
    			//Include tooltips on image
    			if(base.options.tooltips){	
    				base._includeTooltip(vars.current_slide,slideCurrent);
    			}
    			
    			if (base.options.slides.length > 1){
    				// Set next image
    				vars.current_slide == base.options.slides.length - 1 ? loadNext = 0 : loadNext = vars.current_slide + 1;	// If slide is last, load first slide as next
    				imageLink = (base.options.slides[loadNext].url) ? "href='" + base.options.slides[loadNext].url + "'" : "";
    				
    				var imgNext = $('<img src="'+base.options.slides[loadNext][0].image+'"/>');
    				var slideNext = base.el+' li:eq('+loadNext+')';
    				
    				var wrapper = $('<div class="wrapper"></div>');					
    				wrapper.appendTo(slideNext);
    				
    				//SECOND
    				var contentWrapper = $('<a href="' + base.options.slides[vars.current_slide+1][0].tooltips[0].url + '" class="content-wrapper"></a>');
    				
    				imgNext.appendTo(wrapper).parent().parent().addClass('image-loading');
    				contentWrapper.appendTo(wrapper);
    				
    				var newContentWrapper = $('<a href="' + base.options.slides[vars.current_slide+1][0].tooltips[1].url + '" class="content-wrapper"></a>');
    				newContentWrapper.addClass('right').appendTo(wrapper);
    				
    				imgNext.load(function(){
    					$(this).data('origWidth', $(this).width()).data('origHeight', $(this).height());
    					base.resizeNow();	// Resize background image
    				});	// End Load
    				
    				//Include tooltips on image
    				if(base.options.tooltips){
    					base._includeTooltip(loadNext,slideNext);
    				}
    			}
    			/*-----End load initial images-----*/
    			
    			//  Hide elements to be faded in
    			base.$el.css('visibility','hidden');
    			$('.load-item').hide();
    			
    			};
    		
    		
    		/* Launch Supersized
    		----------------------------*/
    		base.launch = function(){
    		
    			base.$el.css('visibility','visible');
    			$('#supersized-loader').remove();		//Hide loading animation
    			
    			// Call theme function for before slide transition
    			if( typeof theme != 'undefined' && typeof theme.beforeAnimation == "function" ) theme.beforeAnimation('next');
    			$('.load-item').show();
    			
    			// Keyboard Navigation
    			if (base.options.keyboard_nav){
    				$(document.documentElement).keyup(function (event) {
    				
    					if(vars.in_animation) return false;		// Abort if currently animating
    					if($(document.activeElement).is("input, textarea")) return false; // Abort if active element is an input or a textarea.
    					
    					// Left Arrow or Down Arrow
    					if ((event.keyCode == 37) || (event.keyCode == 40)) {
    						clearInterval(vars.slideshow_interval);	// Stop slideshow, prevent buildup
    						base.prevSlide();
    					
    					// Right Arrow or Up Arrow
    					} else if ((event.keyCode == 39) || (event.keyCode == 38)) {
    						clearInterval(vars.slideshow_interval);	// Stop slideshow, prevent buildup
    						base.nextSlide();
    					
    					// Spacebar	
    					} else if (event.keyCode == 32 && !vars.hover_pause) {
    						clearInterval(vars.slideshow_interval);	// Stop slideshow, prevent buildup
    						base.playToggle();
    					}
    				
    				});
    			}
    			
    			// Pause when hover on image
    			if (base.options.slideshow && base.options.pause_hover){
    				$(base.el).hover(function() {
    					if(vars.in_animation) return false;		// Abort if currently animating
    							vars.hover_pause = true;	// Mark slideshow paused from hover
    							if(!vars.is_paused){
    								vars.hover_pause = 'resume';	// It needs to resume afterwards
    								base.playToggle();
    							}
    					}, function() {
    					if(vars.hover_pause == 'resume'){
    						base.playToggle();
    						vars.hover_pause = false;
    					}
    					});
    			}
    			
    			if (base.options.slide_links){
    				// Slide marker clicked
    				$(vars.slide_list+'> li').click(function(){
    				
    					index = $(vars.slide_list+'> li').index(this);
    					targetSlide = index + 1;
    					
    					base.goTo(targetSlide);
    					return false;
    					
    				});
    			}
    			
    			// Thumb marker clicked
    			if (base.options.thumb_links){
    				$(vars.thumb_list+'> li').click(function(){
    				
    					index = $(vars.thumb_list+'> li').index(this);
    					targetSlide = index + 1;
    					
    					api.goTo(targetSlide);
    					return false;
    					
    				});
    			}
    			
    			// Start slideshow if enabled
    			if (base.options.slideshow && base.options.slides.length > 1){
    					
    					// Start slideshow if autoplay enabled
    					if (base.options.autoplay && base.options.slides.length > 1){
    						vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval);	// Initiate slide interval
    				}else{
    					vars.is_paused = true;	// Mark as paused
    				}
    				
    				//Prevent navigation items from being dragged					
    				$('.load-item img').bind("contextmenu mousedown",function(){
    					return false;
    				});
    								
    			}
    			
    			// Adjust image when browser is resized
    			$(window).resize(function(){
    					base.resizeNow();
    			});
    			
    			var w = $(window);
    			var curScrollY = w.scrollTop(),
    					curScrollX = w.scrollLeft();
    					
    			$('body').scroll(function(e){	
    				e.preventDefault();			
    					if(vars.in_animation) return false;		// Abort if currently animating
    					
    					// Scroll Down or Scroll Left
    					if( w.scrollTop() > curScrollY || w.scrollLeft() < curScrollX){
    						clearInterval(vars.slideshow_interval);	// Stop slideshow, prevent buildup
    					base.nextSlide();
    					
    				// Scroll Up or Scroll Right
    					} else if(w.scrollTop() < curScrollY || w.scrollLeft() > curScrollX){
    						clearInterval(vars.slideshow_interval);	// Stop slideshow, prevent buildup
    					base.prevSlide();
    					}
    			});
    			
    			var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
     
    			if (document.attachEvent){ //if IE (and Opera depending on user setting)
    				document.attachEvent("on"+mousewheelevt, function(e){checkScroll(e)});}
    			else if (document.addEventListener) {//WC3 browsers
    				document.addEventListener(mousewheelevt, function(e){checkScroll(e)}, false);}
    				
    				checkScroll = function(e){
    				if(vars.in_animation) return false;		// Abort if currently animating
    					var delta = e.wheelDelta;
    				if(delta > 0){
    					clearInterval(vars.slideshow_interval);	// Stop slideshow, prevent buildup
    				base.prevSlide();
    				}
    				else{
    					clearInterval(vars.slideshow_interval);	// Stop slideshow, prevent buildup
    				base.nextSlide();
    				}
    				};
    								
    				//Initialize touch event
    				
    				base.$el.touchwipe({
    						wipeLeft: function() {
    								base.nextSlide();
    						},
    						wipeRight: function() {
    								base.prevSlide();
    						}
    				});
    
    				
    			};
    				
    				
    				/* Resize Images
    		----------------------------*/
    		base.resizeNow = function(){			
    			
    			return base.$el.each(function() {
    					//  Resize each image seperately
    					$('img', base.el).each(function(){
    						
    					thisSlide = $(this);
    					if(thisSlide.data('origHeight')){
    						var ratio = (thisSlide.data('origHeight')/thisSlide.data('origWidth')).toFixed(2);	// Define image ratio
    					}
    					else{
    						var ratio = (1040/2218).toFixed(2);
    					}
    					
    					// Gather browser size
    					var browserwidth = base.$el.width(),
    						browserheight = base.$el.height(),
    						offset;
    					
    					/*-----Resize Image-----*/
    					if (base.options.fit_always){	// Fit always is enabled
    						if ((browserheight/browserwidth) > ratio){
    							resizeWidth();
    						} else {
    							resizeHeight();
    						}
    					}else{	// Normal Resize
    						if ((browserheight <= base.options.min_height) && (browserwidth <= base.options.min_width)){	// If window smaller than minimum width and height
    							
    							if ((browserheight/browserwidth) > ratio){
    								base.options.fit_landscape && ratio < 1 ? resizeWidth(true) : resizeHeight(true);	// If landscapes are set to fit
    							} else {
    								base.options.fit_portrait && ratio >= 1 ? resizeHeight(true) : resizeWidth(true);		// If portraits are set to fit
    							}
    						
    						} else if (browserwidth <= base.options.min_width){		// If window only smaller than minimum width
    							
    							if ((browserheight/browserwidth) > ratio){
    								base.options.fit_landscape && ratio < 1 ? resizeWidth(true) : resizeHeight();	// If landscapes are set to fit
    							} else {
    								base.options.fit_portrait && ratio >= 1 ? resizeHeight() : resizeWidth(true);		// If portraits are set to fit
    							}
    							
    						} else if (browserheight <= base.options.min_height){	// If window only smaller than minimum height
    						
    							if ((browserheight/browserwidth) > ratio){
    								base.options.fit_landscape && ratio < 1 ? resizeWidth() : resizeHeight(true);	// If landscapes are set to fit
    							} else {
    								base.options.fit_portrait && ratio >= 1 ? resizeHeight(true) : resizeWidth();		// If portraits are set to fit
    							}
    						
    						} else {	// If larger than minimums
    							
    							if ((browserheight/browserwidth) > ratio){
    								base.options.fit_landscape && ratio < 1 ? resizeWidth() : resizeHeight();	// If landscapes are set to fit
    							} else {
    								base.options.fit_portrait && ratio >= 1 ? resizeHeight() : resizeWidth();		// If portraits are set to fit
    							}
    							
    						}
    					}
    					/*-----End Image Resize-----*/
    					
    					
    					/*-----Resize Functions-----*/
    					function defineWrapperWidth(slide,slideWidth){
    						slide.width(slideWidth);
    						var left = (browserwidth - slideWidth)/2;
    						var contentWidth = slideWidth * 0.2 ;
    						var contentWrapper = slide.find('.content-wrapper');
    						contentWrapper.width(contentWidth);
    						//contentWrapper.eq(1).find('.tooltip').css({'left':contentWidth/2});
    					};
    					
    					function resizeWidth(minimum){
    					
    						if (minimum){	// If minimum height needs to be considered
    							if(thisSlide.width() < browserwidth || thisSlide.width() < base.options.min_width ){
    								if (thisSlide.width() * ratio >= base.options.min_height){
    									thisSlide.width(base.options.min_width);
    									thisSlide.parent().width(base.options.min_width);
    									defineWrapperWidth(thisSlide.parent().parent(),base.options.min_width);
    									//thisSlide.parent().parent().width(base.options.min_width);
    										thisSlide.height(thisSlide.width() * ratio);
    									}else{
    										resizeHeight();
    									}
    								}
    						}else{
    							if (base.options.min_height >= browserheight && !base.options.fit_landscape){	// If minimum height needs to be considered					
    								if (browserwidth * ratio >= base.options.min_height || (browserwidth * ratio >= base.options.min_height && ratio <= 1)){	// If resizing would push below minimum height or image is a landscape
    									thisSlide.width(browserwidth);
    									thisSlide.parent().width(browserwidth);
    									defineWrapperWidth(thisSlide.parent().parent(),browserwidth);
    									//thisSlide.parent().parent().width(browserwidth);
    									thisSlide.height(browserwidth * ratio);
    								} else if (ratio > 1){		// Else the image is portrait
    									thisSlide.height(base.options.min_height);
    									thisSlide.width(thisSlide.height() / ratio);
    									thisSlide.parent().width(thisSlide.height() / ratio);
    									defineWrapperWidth(thisSlide.parent().parent(),thisSlide.height() / ratio);
    									//thisSlide.parent().parent().width(thisSlide.height() / ratio);
    								} else if (thisSlide.width() < browserwidth) {
    									thisSlide.width(browserwidth);
    									thisSlide.parent().width(browserwidth);
    									defineWrapperWidth(thisSlide.parent().parent(),browserwidth);
    									//thisSlide.parent().parent().width(browserwidth);
    										thisSlide.height(thisSlide.width() * ratio);
    								}
    							}else{	// Otherwise, resize as normal
    								thisSlide.width(browserwidth);
    								thisSlide.parent().width(browserwidth);
    								defineWrapperWidth(thisSlide.parent().parent(),browserwidth);
    								//thisSlide.parent().parent().width(browserwidth);
    								thisSlide.height(browserwidth * ratio);
    							}
    						}
    					};
    					
    					function resizeHeight(minimum){
    					
    						if (minimum){	// If minimum height needs to be considered
    							if(thisSlide.height() < browserheight){
    								if (thisSlide.height() / ratio >= base.options.min_width){
    									thisSlide.height(base.options.min_height);
    									thisSlide.width(thisSlide.height() / ratio);
    									thisSlide.parent().width(thisSlide.height() / ratio);
    									defineWrapperWidth(thisSlide.parent().parent(),thisSlide.height() / ratio);
    									//thisSlide.parent().parent().width(thisSlide.height() / ratio);
    								}else{
    									resizeWidth(true);
    								}
    							}
    						}else{	// Otherwise, resized as normal
    							if (base.options.min_width >= browserwidth){	// If minimum width needs to be considered
    								if (browserheight / ratio >= base.options.min_width || ratio > 1){	// If resizing would push below minimum width or image is a portrait
    									thisSlide.height(browserheight);
    									thisSlide.width(browserheight / ratio);
    									thisSlide.parent().width(browserheight / ratio);
    									defineWrapperWidth(thisSlide.parent().parent(),browserheight / ratio);
    									//thisSlide.parent().parent().width(browserheight / ratio);
    								} else if (ratio <= 1){		// Else the image is landscape
    									thisSlide.width(base.options.min_width);
    									thisSlide.parent().width(base.options.min_width);
    									defineWrapperWidth(thisSlide.parent().parent(),base.options.min_width);
    									//thisSlide.parent().parent().width(base.options.min_width);
    										thisSlide.height(thisSlide.width() * ratio);
    								}
    							}else{	// Otherwise, resize as normal
    								thisSlide.height(browserheight);
    								thisSlide.width(browserheight / ratio);
    								thisSlide.parent().width(browserheight / ratio);
    								defineWrapperWidth(thisSlide.parent().parent(),browserheight / ratio);
    								//thisSlide.parent().parent().width(browserheight / ratio);
    							}
    						}
    					};
    					
    					
    									
    					
    					/*-----End Resize Functions-----*/
    					
    					if (thisSlide.parents('li').hasClass('image-loading')){
    						$('.image-loading').removeClass('image-loading');
    					}
    					
    					// Horizontally Center
    					if (base.options.horizontal_center){
    						var slideWidth = thisSlide.parent().width();
    						
    						console.log("browser, imagem, conta "+browserwidth+", "+thisSlide.parent().width()+", "+(browserwidth - thisSlide.parent().width())/2);
    						thisSlide.parent().css('left', (browserwidth - thisSlide.parent().width())/2);
    						var leftPos = slideWidth/2 - slideWidth*0.2 + slideWidth *0.08;
    						thisSlide.parent().parent().parent().find('.content-wrapper').css('left', leftPos);
    					}
    					
    					// Vertically Center
    					if (base.options.vertical_center){
    						thisSlide.parent().parent().css('top', (browserheight - $(this).height())/2);
    					}
    					
    				});
    				
    				// Basic image drag and right click protection
    				if (base.options.image_protect){
    					
    					$('img', base.el).bind("contextmenu mousedown",function(){
    						return false;
    					});
    				
    				}
    				
    				return false;
    				
    			});
    			
    		};
    				
    				
    				/* Next Slide
    		----------------------------*/
    		base.nextSlide = function(){
    			
    			if(vars.in_animation || !api.options.slideshow) return false;		// Abort if currently animating
    				else vars.in_animation = true;		// Otherwise set animation marker
    				
    				clearInterval(vars.slideshow_interval);	// Stop slideshow
    				
    				var slides = base.options.slides,					// Pull in slides array
    				liveslide = base.$el.find('.activeslide');		// Find active slide
    				$('.prevslide').removeClass('prevslide');
    				liveslide.removeClass('activeslide').addClass('prevslide');	// Remove active class & update previous slide
    					
    			// Get the slide number of new slide
    			vars.current_slide + 1 == base.options.slides.length ? vars.current_slide = 0 : vars.current_slide++;
    			
    				var nextslide = $(base.el+' li:eq('+vars.current_slide+')'),
    					prevslide = base.$el.find('.prevslide');
    			
    			// If hybrid mode is on drop quality for transition
    			if (base.options.performance == 1) base.$el.removeClass('quality').addClass('speed');	
    			
    			
    			/*-----Load Image-----*/
    			
    			loadSlide = false;
    
    			vars.current_slide == base.options.slides.length - 1 ? loadSlide = 0 : loadSlide = vars.current_slide + 1;	// Determine next slide
    
    			var targetList = base.el+' li:eq('+loadSlide+')';
    			if (!$(targetList).html()){
    				
    				var wrapper = $('<div class="wrapper"></div>');				
    				wrapper.appendTo(targetList);
    				
    				// If links should open in new window
    				var linkTarget = base.options.new_window ? ' target="_blank"' : '';
    				
    				imageLink = (base.options.slides[loadSlide].url) ? "href='" + base.options.slides[loadSlide].url + "'" : "";	// If link exists, build it
    				var img = $('<img src="'+base.options.slides[loadSlide][0].image+'"/>'); 
    				
    				//THIRD AND ONWARDS
    				var contentWrapper = $('<a href="' + base.options.slides[loadSlide][0].tooltips[0].url + '" class="content-wrapper"></a>');
    				
    				img.appendTo(wrapper).parent().parent().addClass('image-loading').css('visibility','hidden');
    				contentWrapper.appendTo(wrapper);
    				
    				var newContentWrapper = $('<a href="' + base.options.slides[loadSlide][0].tooltips[1].url + '" class="content-wrapper"></a>');
    				newContentWrapper.addClass('right').appendTo(wrapper);
    				
    				img.load(function(){
    					base._origDim($(this));
    					base.resizeNow();
    				});	// End Load
    				
    				//Include tooltips on image
    				if(base.options.tooltips){	
    					base._includeTooltip(loadSlide,targetList);
    				}
    			};
    						
    			// Update thumbnails (if enabled)
    			if (base.options.thumbnail_navigation == 1){
    			
    				// Load previous thumbnail
    				vars.current_slide - 1 < 0  ? prevThumb = base.options.slides.length - 1 : prevThumb = vars.current_slide - 1;
    				$(vars.prev_thumb).html($("<img/>").attr("src", base.options.slides[prevThumb].image));
    			
    				// Load next thumbnail
    				nextThumb = loadSlide;
    				$(vars.next_thumb).html($("<img/>").attr("src", base.options.slides[nextThumb].image));
    				
    			}
    			
    			
    			
    			/*-----End Load Image-----*/
    			
    			
    			// Call theme function for before slide transition
    			if( typeof theme != 'undefined' && typeof theme.beforeAnimation == "function" ) theme.beforeAnimation('next');
    			
    			//Update slide markers
    			if (base.options.slide_links){
    				$('.current-slide').removeClass('current-slide');
    				$(vars.slide_list +'> li' ).eq(vars.current_slide).addClass('current-slide');
    			}
    				
    				nextslide.css('visibility','hidden').addClass('activeslide');	// Update active slide
    				
    				switch(base.options.transition){
    					case 0: case 'none':	// No transition
    							nextslide.css('visibility','visible'); vars.in_animation = false; base.afterAnimation();
    							break;
    					case 1: case 'fade':	// Fade
    							nextslide.css({opacity : 0, 'visibility': 'visible'}).animate({opacity : 1, avoidTransforms : false}, base.options.transition_speed, function(){ base.afterAnimation(); });
    							break;
    					case 2: case 'slideTop':	// Slide Top
    							nextslide.css({top : -80, 'visibility': 'visible'}).animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
    							break;
    					case 3: case 'slideRight':	// Slide Right
    						nextslide.show().css({left : 80, 'opacity':0, 'visibility': 'visible'}).animate({ left:0, 'opacity':1, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation()});
    						liveslide.animate({ left: -80, avoidTransforms : false}, base.options.transition_speed, function(){liveslide.hide(); liveslide.css({'opacity':0});} );
    						break;
    					case 4: case 'slideBottom': // Slide Bottom
    						nextslide.show().css({top : 80, 'z-index':-10, 'opacity':1, 'visibility': 'visible'}).animate({ top:0, 'opacity':1, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
    						liveslide.css({'z-index':1}).animate({ top: -80, 'opacity':0, avoidTransforms : false}, base.options.transition_speed, function(){liveslide.hide()} );
    						break;
    					case 5: case 'slideLeft':  // Slide Left
    						nextslide.css({left : -base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
    						break;
    					case 6: case 'carouselRight':	// Carousel Right
    						nextslide.css({left : base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
    					liveslide.animate({ left: -base.$el.width(), avoidTransforms : false }, base.options.transition_speed );
    						break;
    					case 7: case 'carouselLeft':   // Carousel Left
    						nextslide.css({left : -base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
    					liveslide.animate({ left: base.$el.width(), avoidTransforms : false }, base.options.transition_speed );
    						break;
    				}
    				return false;	
    		};
    		
    		
    		/* Previous Slide
    		----------------------------*/
    		base.prevSlide = function(){
    		
    			if(vars.in_animation || !api.options.slideshow) return false;		// Abort if currently animating
    				else vars.in_animation = true;		// Otherwise set animation marker
    			
    			clearInterval(vars.slideshow_interval);	// Stop slideshow
    			
    			var slides = base.options.slides,					// Pull in slides array
    				liveslide = base.$el.find('.activeslide');		// Find active slide
    				$('.prevslide').removeClass('prevslide');
    				liveslide.removeClass('activeslide').addClass('prevslide');		// Remove active class & update previous slide
    			
    			// Get current slide number
    			vars.current_slide == 0 ?  vars.current_slide = base.options.slides.length - 1 : vars.current_slide-- ;
    				
    				var nextslide =  $(base.el+' li:eq('+vars.current_slide+')'),
    					prevslide =  base.$el.find('.prevslide');
    			
    			// If hybrid mode is on drop quality for transition
    			if (base.options.performance == 1) base.$el.removeClass('quality').addClass('speed');	
    			
    			
    			/*-----Load Image-----*/
    			
    			loadSlide = vars.current_slide;
    			
    			var targetList = base.el+' li:eq('+loadSlide+')';
    			if (!$(targetList).html()){
    				var wrapper = $('<div class="wrapper"></div>');				
    				wrapper.appendTo(targetList);
    				
    				// If links should open in new window
    				var linkTarget = base.options.new_window ? ' target="_blank"' : '';
    				imageLink = (base.options.slides[loadSlide].url) ? "href='" + base.options.slides[loadSlide].url + "'" : "";	// If link exists, build it
    				var img = $('<img src="'+base.options.slides[loadSlide][0].image+'"/>');
    				var contentWrapper = $('<a href="#" class="content-wrapper"></a>');
    				
    				img.appendTo(wrapper).parent().parent().addClass('image-loading').css('visibility','hidden');
    				contentWrapper.appendTo(wrapper);
    				contentWrapper.clone().addClass('right').appendTo(wrapper);
    				
    				img.load(function(){
    					base._origDim($(this));
    					base.resizeNow();
    				});	// End Load
    				
    				//Include tooltips on image
    				if(base.options.tooltips){	
    					base._includeTooltip(loadSlide,targetList);
    				}
    				
    				//img.appendTo(targetList).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading').css('visibility','hidden');
    				
    				/*img.load(function(){
    					base._origDim($(this));
    					base.resizeNow();
    				});	// End Load*/
    			};
    			
    			// Update thumbnails (if enabled)
    			if (base.options.thumbnail_navigation == 1){
    			
    				// Load previous thumbnail
    				//prevThumb = loadSlide;
    				loadSlide == 0 ? prevThumb = base.options.slides.length - 1 : prevThumb = loadSlide - 1;
    				$(vars.prev_thumb).html($("<img/>").attr("src", base.options.slides[prevThumb].image));
    				
    				// Load next thumbnail
    				vars.current_slide == base.options.slides.length - 1 ? nextThumb = 0 : nextThumb = vars.current_slide + 1;
    				$(vars.next_thumb).html($("<img/>").attr("src", base.options.slides[nextThumb].image));
    			}
    			
    			/*-----End Load Image-----*/
    			
    			
    			// Call theme function for before slide transition
    			if( typeof theme != 'undefined' && typeof theme.beforeAnimation == "function" ) theme.beforeAnimation('prev');
    			
    			//Update slide markers
    			if (base.options.slide_links){
    				$('.current-slide').removeClass('current-slide');
    				$(vars.slide_list +'> li' ).eq(vars.current_slide).addClass('current-slide');
    			}
    			
    				nextslide.css('visibility','hidden').addClass('activeslide');	// Update active slide
    				
    				switch(base.options.transition){
    					case 0: case 'none':	// No transition
    							nextslide.css('visibility','visible'); vars.in_animation = false; base.afterAnimation();
    							break;
    					case 1: case 'fade':	// Fade
    							nextslide.css({opacity : 0, 'visibility': 'visible'}).animate({opacity : 1, avoidTransforms : false}, base.options.transition_speed, function(){ base.afterAnimation(); });
    							break;
    					case 2: case 'slideTop':	// Slide Top (reverse)
    							nextslide.css({top : 80, 'opacity':0, 'visibility': 'visible'}).animate({ top:0, 'opacity':1, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
    							liveslide.animate({ top: -80, 'opacity':0, avoidTransforms : false}, base.options.transition_speed );
    							break;
    					case 3: case 'slideRight':	// Slide Right (reverse)
    						nextslide.show().css({left : -80, 'opacity':0, 'visibility': 'visible'}).animate({ left:0, 'opacity':1, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation()});
    						liveslide.animate({ left: 80, avoidTransforms : false}, base.options.transition_speed, function(){liveslide.hide(); liveslide.css({'opacity':0});} );
    						break;
    					case 4: case 'slideBottom': // Slide Bottom (reverse)
    						nextslide.show().css({top : -80, 'z-index':-10, 'opacity':1, 'visibility': 'visible'}).animate({ top:0, 'opacity': 1, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
    						liveslide.css({'z-index':1}).animate({ top: 80, 'opacity':0, avoidTransforms : false}, base.options.transition_speed, function(){liveslide.hide()} );
    						break;
    					case 5: case 'slideLeft':  // Slide Left (reverse)
    						nextslide.css({left : base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
    						break;
    					case 6: case 'carouselRight':	// Carousel Right (reverse)
    						nextslide.css({left : -base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
    					liveslide.css({left : 0}).animate({ left: base.$el.width(), avoidTransforms : false}, base.options.transition_speed );
    						break;
    					case 7: case 'carouselLeft':   // Carousel Left (reverse)
    						nextslide.css({left : base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
    					liveslide.css({left : 0}).animate({ left: -base.$el.width(), avoidTransforms : false }, base.options.transition_speed );
    						break;
    				}
    				return false;	
    		};
    		
    		
    		/* Play/Pause Toggle
    		----------------------------*/
    		base.playToggle = function(){
    		
    			if (vars.in_animation || !api.options.slideshow) return false;		// Abort if currently animating
    			
    			if (vars.is_paused){
    				
    				vars.is_paused = false;
    				
    				// Call theme function for play
    				if( typeof theme != 'undefined' && typeof theme.playToggle == "function" ) theme.playToggle('play');
    				
    				// Resume slideshow
    						vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval);
    							
    					}else{
    						
    						vars.is_paused = true;
    						
    						// Call theme function for pause
    						if( typeof theme != 'undefined' && typeof theme.playToggle == "function" ) theme.playToggle('pause');
    						
    						// Stop slideshow
    						clearInterval(vars.slideshow_interval);	
    					
    					}
    				
    				return false;
    				
    			};
    			
    			
    			/* Go to specific slide
    		----------------------------*/
    			base.goTo = function(targetSlide){
    			if (vars.in_animation || !api.options.slideshow) return false;		// Abort if currently animating
    			
    			var totalSlides = base.options.slides.length;
    			
    			// If target outside range
    			if(targetSlide < 0){
    				targetSlide = totalSlides;
    			}else if(targetSlide > totalSlides){
    				targetSlide = 1;
    			}
    			targetSlide = totalSlides - targetSlide + 1;
    			
    			clearInterval(vars.slideshow_interval);	// Stop slideshow, prevent buildup
    			
    			// Call theme function for goTo trigger
    			if (typeof theme != 'undefined' && typeof theme.goTo == "function" ) theme.goTo();
    			
    			if (vars.current_slide == totalSlides - targetSlide){
    				if(!(vars.is_paused)){
    					vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval);
    				} 
    				return false;
    			}
    			
    			// If ahead of current position
    			if(totalSlides - targetSlide > vars.current_slide ){
    				
    				// Adjust for new next slide
    				vars.current_slide = totalSlides-targetSlide-1;
    				vars.update_images = 'next';
    				base._placeSlide(vars.update_images);
    				
    			//Otherwise it's before current position
    			}else if(totalSlides - targetSlide < vars.current_slide){
    				
    				// Adjust for new prev slide
    				vars.current_slide = totalSlides-targetSlide+1;
    				vars.update_images = 'prev';
    					base._placeSlide(vars.update_images);
    					
    			}
    			
    			// set active markers
    			if (base.options.slide_links){
    				$(vars.slide_list +'> .current-slide').removeClass('current-slide');
    				$(vars.slide_list +'> li').eq((totalSlides-targetSlide)).addClass('current-slide');
    			}
    			
    			if (base.options.thumb_links){
    				$(vars.thumb_list +'> .current-thumb').removeClass('current-thumb');
    				$(vars.thumb_list +'> li').eq((totalSlides-targetSlide)).addClass('current-thumb');
    			}
    			
    		};
    				
    				
    				/* Place Slide
    		----------------------------*/
    				base._placeSlide = function(place){
    					
    			// If links should open in new window
    			var linkTarget = base.options.new_window ? ' target="_blank"' : '';
    			
    			loadSlide = false;
    			
    			if (place == 'next'){
    				
    				vars.current_slide == base.options.slides.length - 1 ? loadSlide = 0 : loadSlide = vars.current_slide + 1;	// Determine next slide
    				
    				var targetList = base.el+' li:eq('+loadSlide+')';
    				
    				if (!$(targetList).html()){
    					
    					var wrapper = $('<div class="wrapper"></div>');				
    					wrapper.appendTo(targetList);
    					// If links should open in new window
    					var linkTarget = base.options.new_window ? ' target="_blank"' : '';
    					
    					imageLink = (base.options.slides[loadSlide].url) ? "href='" + base.options.slides[loadSlide].url + "'" : "";	// If link exists, build it
    					var img = $('<img src="'+base.options.slides[loadSlide][0].image+'"/>'); 
    					var contentWrapper = $('<a href="#" class="content-wrapper"></a>');
    					
    					img.appendTo(wrapper).parent().parent().addClass('image-loading').css('visibility','hidden');
    					contentWrapper.appendTo(wrapper);
    					contentWrapper.clone().addClass('right').appendTo(wrapper);
    					
    					img.load(function(){
    						base._origDim($(this));
    						base.resizeNow();
    					});	// End Load
    					
    					//Include tooltips on image
    					if(base.options.tooltips){
    						base._includeTooltip(loadSlide,targetList);
    					} 
    					
    				};
    				
    				base.nextSlide();
    				
    			}else if (place == 'prev'){
    			
    				vars.current_slide - 1 < 0  ? loadSlide = base.options.slides.length - 1 : loadSlide = vars.current_slide - 1;	// Determine next slide
    				
    				var targetList = base.el+' li:eq('+loadSlide+')';
    				
    				if (!$(targetList).html()){
    				
    					var wrapper = $('<div class="wrapper"></div>');				
    					wrapper.appendTo(targetList);
    					// If links should open in new window
    					var linkTarget = base.options.new_window ? ' target="_blank"' : '';
    					
    					imageLink = (base.options.slides[loadSlide].url) ? "href='" + base.options.slides[loadSlide].url + "'" : "";	// If link exists, build it
    					var img = $('<img src="'+base.options.slides[loadSlide][0].image+'"/>'); 
    					var contentWrapper = $('<a href="#" class="content-wrapper"></a>');
    					
    					img.appendTo(wrapper).parent().parent().addClass('image-loading').css('visibility','hidden');
    					contentWrapper.appendTo(wrapper);
    					contentWrapper.clone().addClass('right').appendTo(wrapper);
    					
    					img.load(function(){
    						base._origDim($(this));
    						base.resizeNow();
    					});	// End Load
    					
    					//Include tooltips on image
    					if(base.options.tooltips){		
    						base._includeTooltip(loadSlide,targetList);
    					} 
    					
    					/*img.appendTo(targetList).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading').css('visibility','hidden');
    					
    					img.load(function(){
    						base._origDim($(this));
    						base.resizeNow();
    					});	// End Load*/
    				};
    				base.prevSlide();
    			}
    			
    		};
    		
    		/* Include tooltip
    		----------------------------*/
    		base._includeTooltip = function(index, slide){
    			for(var i=0; i<2 ; i++){
    				thisTooltip = base.options.slides[index][0].tooltips[i];
    				tooltip = $('<div><a href="#">Ver Referência</a></div>');
    				tooltip.appendTo(slide+' .content-wrapper:eq('+i+')').addClass('tooltip').css({'position': 'absolute', left: thisTooltip.posX, top: thisTooltip.posY});
    				tooltipContent = '<div class="tooltip-box">';
    				//console.log(thisTooltip.items);
    				for(var k=0; k < thisTooltip.items.length; k++){
    					tooltipContent += '<div><p class="item-name">'+thisTooltip.items[k].name+'</p><p class="item-reference">ref. '+thisTooltip.items[k].reference+'</p></div>';
    				}
    				tooltipContent += '</div>';
    				
    				$(tooltipContent).appendTo(tooltip);
    			}
    		};
    		
    		
    		/* Get Original Dimensions
    		----------------------------*/
    		base._origDim = function(targetSlide){
    			targetSlide.data('origWidth', targetSlide.width()).data('origHeight', targetSlide.height());
    		};
    		
    		
    		/* After Slide Animation
    		----------------------------*/
    		base.afterAnimation = function(){
    			
    			// If hybrid mode is on swap back to higher image quality
    			if (base.options.performance == 1){
    					base.$el.removeClass('speed').addClass('quality');
    			}
    			
    			// Update previous slide
    			if (vars.update_images){
    				vars.current_slide - 1 < 0  ? setPrev = base.options.slides.length - 1 : setPrev = vars.current_slide-1;
    				vars.update_images = false;
    				$('.prevslide').removeClass('prevslide');
    				$(base.el+' li:eq('+setPrev+')').addClass('prevslide');
    			}
    			
    			vars.in_animation = false;
    			
    			// Resume slideshow
    			if (!vars.is_paused && base.options.slideshow){
    				vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval);
    				if (base.options.stop_loop && vars.current_slide == base.options.slides.length - 1 ) base.playToggle();
    			}
    			
    			// Call theme function for after slide transition
    			if (typeof theme != 'undefined' && typeof theme.afterAnimation == "function" ) theme.afterAnimation();			
    			
    			return false;
    		
    		};
    		
    		base.getField = function(field){
    			return base.options.slides[vars.current_slide][field];
    		};
    		
    				// Make it go!
    				base.init();
    	};
    	
    	
    	/* Global Variables
    	----------------------------*/
    	$.supersized.vars = {
    	
    		// Elements							
    		thumb_tray			:	'#thumb-tray',	// Thumbnail tray
    		thumb_list			:	'#thumb-list',	// Thumbnail list
    		slide_list          :   '#slide-list',	// Slide link list
    		
    		// Internal variables
    		current_slide			:	0,			// Current slide number
    		in_animation 			:	false,		// Prevents animations from stacking
    		is_paused 				: 	false,		// Tracks paused on/off
    		hover_pause				:	false,		// If slideshow is paused from hover
    		slideshow_interval		:	false,		// Stores slideshow timer					
    		update_images 			: 	false,		// Trigger to update images after slide jump
    		options					:	{}			// Stores assembled options list
    		
    	};
    	
    	
    	/* Default Options
    	----------------------------*/
    	$.supersized.defaultOptions = {
    		
    			// Functionality
    		slideshow               :   1,			// Slideshow on/off
    		autoplay				:	1,			// Slideshow starts playing automatically
    		start_slide             :   1,			// Start slide (0 is random)
    		stop_loop				:	0,			// Stops slideshow on last slide
    		random					: 	0,			// Randomize slide order (Ignores start slide)
    		slide_interval          :   5000,		// Length between transitions
    		transition              :   1, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
    		transition_speed		:	750,		// Speed of transition
    		new_window				:	1,			// Image links open in new window/tab
    		pause_hover             :   0,			// Pause slideshow on hover
    		keyboard_nav            :   1,			// Keyboard navigation on/off
    		performance				:	1,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed //  (Only works for Firefox/IE, not Webkit)
    		image_protect			:	1,			// Disables image dragging and right click with Javascript
    													 
    		// Size & Position
    		fit_always				:	0,			// Image will never exceed browser width or height (Ignores min. dimensions)
    		fit_landscape			:   0,			// Landscape images will not exceed browser width
    		fit_portrait         	:   1,			// Portrait images will not exceed browser height  			   
    		min_width		        :   0,			// Min width allowed (in pixels)
    		min_height		        :   0,			// Min height allowed (in pixels)
    		horizontal_center       :   1,			// Horizontally center background
    		vertical_center         :   1,			// Vertically center background
    		
    													 
    		// Components							
    		slide_links				:	1,			// Individual links for each slide (Options: false, 'num', 'name', 'blank')
    		thumb_links				:	1,			// Individual thumb links for each slide
    		thumbnail_navigation    :   0			// Thumbnail navigation
    			
    		};
    		
    		$.fn.supersized = function(options){
    				return this.each(function(){
    						(new $.supersized(options));
    				});
    		};
    		
    })(jQuery);

    Here's a demo of it working.

  17. #17
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Oh, and by the way, you'll have to comment out the following lines in the file "general-interactions-lookbook.js"

    Code:
    $('body').on('click', 'a.content-wrapper',function(e){
      e.preventDefault();
      $(this).find('.tooltip').toggle();
    });
    $('body').on('click','div.tooltip a', function(e){
      e.preventDefault();
      $(this).find('.tooltip-box').toggle();
    });
    This means that the tooltips no longer appear on click, as you want now to follow the links you specify.

  18. #18
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked perfectly, thank you! \ o /

    Another thing I'm trying to do is integrate this zoom effect (http://www.mariafilo.com.br/verao2014/lookbook - click one of the images to see the effect) in this gallery you helped me modify.

    I can run on the same page, but not on images of Supersized. Does conflict of jQuery? Already tried everything and not gave right for me.

  19. #19
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Managed to solve putting the javascript on the page, but it is not very practical.

  20. #20
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Felipe Turquize View Post
    Managed to solve putting the javascript on the page, but it is not very practical.
    Can you provide a link to the page this is on?

  21. #21
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Friend, was making a general test gallery that you helped me solve a few problems and I realized that only the first four and the last two images are opening a lightbox when clicked. Can you help me solve?

    http://blabloo.com.br/v2/colecao

  22. #22
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had passed the wrong link, but is now correct. http://blabloo.com.br/v2/colecao

  23. #23
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Sorry it took a while to get back to you.
    I had a look at the page you link to just now.
    There are no obvious errors on the page, which is a shame, as this means the problem will be harder to find.

    Basically, the work I did for you on the plugin previously, still seems to be sound.
    I conclude this, as when I hover my mouse over any of the images, I see the link specified in the options, displayed in the bottom left hand corner of the screen (Chrome).

    So, how to debug?

    One idea I did have is that the problem occurs when you have the same image twice in your set of slides.
    Could you check that out?

    Otherwise, I would ask you to strip out all unnecessary content, JavaScript and CSS, so as to make a very minimal page that reproduces your issue, then let me know when you have done that.

  24. #24
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've done these before and it goes like test did not work. = /

    I think the problem is here: http://blabloo.com.br/v2/js/supersized.js

  25. #25
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not taking your time, I have another important question. You can leave just a tooltip on some pages?

    Something like:

    [
    {
    image : 'lookbook/21-22.jpg',
    tooltips : [
    { items: [{name:'peça 1', reference:'00001'},{name:'peça 2', reference:'00002'},{name:'peça 3', reference:'00003'},{name:'peça 4', reference:'00004'}], posX:'93%', posY:'25%', url:'#'},
    { items: [{name:'peça 1', reference:'00005'},{name:'peça 2', reference:'00006'},{name:'peça 3', reference:'00007'},{name:'peça 4', reference:'00008'}], posX:'115%', posY:'25%', url:'#'}
    ]
    }
    ],
    [
    {
    image : 'lookbook/23.jpg',
    tooltips : [
    { items: [{name:'peça 1', reference:'00001'},{name:'peça 2', reference:'00002'},{name:'peça 3', reference:'00003'},{name:'peça 4', reference:'00004'}], posX:'93%', posY:'25%', url:'#'}
    ]
    }
    ]
    Is that on some pages will have only one model, which will be centered on the screen.

    The link is centralized in this way:

    Code:
    // Horizontally Center
                   if (base.options.horizontal_center){
                      var slideWidth = thisSlide.parent().width();
                      
                      thisSlide.parent().css('left', (browserwidth - thisSlide.parent().width())/2);
                      var leftPos = slideWidth/2 - slideWidth*0.2 + slideWidth *0.08;
    
                      thisSlide.parent().parent().parent().find('.content-wrapper').css('left', leftPos);
                   }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •