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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
  •