Help with SUPERSIZED

JavaScript
1

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:


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

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

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:


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/supersized-lookbook.js

4

Nope. Not seeing that.

Screenshot:

Source:

<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

This:

<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

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

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

Ok, well back to the original problem.
You want to alter where those links point to, right?

Can’t you just do:

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

Yes, but the links need to be different for each image. = /

10

Where are the links defined?
Which format do they need to have?

11

By default is set so for the whole image:

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:

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

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:

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:

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

Should not I create an array with all the slides?

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:'calc&#807;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:'calc&#807;a montaria c/couro', reference:'10833'},{name:'bolsa', reference:'10774'},{name:'lenc&#807;o onc&#807;a', reference:'10859'},{name:'gargantilha', reference:'10779'}], posX:'90%', posY:'20%'}, 
																	{ items: [{name:'camisa est. seda pura', reference:'10843'},{name:'calc&#807;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

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

Thank you. :slight_smile:

16

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.

//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/supersized-lookbook.js, with this (making a backup first):

/*

	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

Oh, and by the way, you’ll have to comment out the following lines in the file “general-interactions-lookbook.js”

$('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

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

Managed to solve putting the javascript on the page, but it is not very practical.

20

Can you provide a link to the page this is on?