[Resolvido] slideshow

[xtroino 0]

Estou implementando em meu site uma galeria utilizando jquery.

Encontrei uma muito bacana Clique aqui.

Ela funciona bem se for em html onde na mesma pasta temos a 1.jpg e a thumb_1.jpg.

Acontece que em meu site está em PHP e as imagens vêm do banco de dados, assim a imagem principal aparece mas o thumb não. Estive a analisar o código e percebi que ele necessita de uma imagem com o prefixo thumb_. Comprovei isso pois no ficheiro slideView.1.2.min.js surge este trecho de código

thumbPrefix:"thumb_"

.

Precisava de ajuda pois queria definir uma pasta para os ficheiros thumb e um prefixo diferente para todas as imagens.

Penso que o segredo está aqui

;thumbCon=$("<div class='wrap' />").append(thumbList).appendTo(slidebar);$.each(images,function(index,img){thumbList.append("<li><a href='#' id='"+(index+1)+"'><img src='"+getThumbName(img.src,options.thumbPrefix)+"' alt='"+img.alt+"' /></a></li>")});li=thumbList.find("li")

Obrigado

 

Aqui fica o ficheiro slideView.1.2.min.js

(function($){$.iSlideView={build:function(user_options){var defaults={thumb:true,thumbPrefix:"thumb_",frame:{isExist:false},slideBy:1,speed:350,easeOut:"swing",easeIn:"swing",easeThumb:"swing",loop:false,interval:5000},options=$.extend(defaults,user_options),getThumbName=function(n,prefix){var arr=n.split("/");var tl=n.length;var w=arr[arr.length-1].length;return n.substr(0,tl-w-1)+"/"+prefix+arr[arr.length-1]};return $(this).each(function(){var x=$(this),list=x.find("ul"),links=list.find("a"),images=list.find("img"),slidebar,thumbList,thumbCon,desc,arrow,back=options.leftArrow?$(options.leftArrow):$("<span class='arrowL arrow'><</span>"),next=options.rightArrow?$(options.rightArrow):$("<span class='arrowR arrow'>></span>"),xH,xW,li,liW,totalW,xTotalH,Pointer,total,tLink,isBusy=false,focusTo=function(p){var offsetT=-(xH*p);if(isBusy){list.stop()}isBusy=true;if(options.desc){desc.html(options.desc[p])}else{desc.html(images.eq(p).attr("alt"))}list.animate({top:offsetT+"px"},options.speed,options.easeOut,function(){isBusy=false})};links.click(function(){return false});var xW=x.width();var xH=x.height();if(options.frame.isExist){$("<div class='slideFrame' />").appendTo(x).css({width:x.width()-options.frame.width*2,height:x.height()-options.frame.width*2,border:options.frame.width+"px solid "+options.frame.color,position:"absolute",top:0,left:0,zIndex:4})}desc=$("<p class='desc' />").appendTo(x);if(options.thumb||(!options.leftArrow||!options.rightArrow)){slidebar=$("<div class='slidebar' />").appendTo(x).fadeTo("fast",0.8)}if(options.thumb){thumbList=$("<ul class='thumbList' />");thumbCon=$("<div class='wrap' />").append(thumbList).appendTo(slidebar);$.each(images,function(index,img){thumbList.append("<li><a href='#' id='"+(index+1)+"'><img src='"+getThumbName(img.src,options.thumbPrefix)+"' alt='"+img.alt+"' /></a></li>")});li=thumbList.find("li");liW=li.width();totalW=li.length*liW;thumbList.css("width",totalW).hover(function(){slidebar.fadeTo("fast",1)},function(){slidebar.fadeTo("fast",0.8)});tLink=thumbList.find("a").each(function(i){$(this).hover(function(){var id=this.id-1;(function(index){if(index!=Pointer){focusTo(id)}})(i)},function(){focusTo(Pointer)})})}if(!options.leftArrow||!options.rightArrow){slidebar.append(next).prepend(back)}focusTo(0);desc.fadeTo("fast",0.6).hover(function(){$(this).fadeTo("fast",0.9)},function(){$(this).fadeTo("fast",0.6)});xTotalH=images.length*xH;list.css("height",xTotalH);Pointer=0;total=images.length;if(!options.leftArrow){back.fadeTo("fast",0.5)}if(options.loop){setInterval(function(){next.click()},options.interval)}next.click(function(){if(total-Pointer>options.slideBy){if(options.thumb){var offsetL=parseInt(thumbList.css("left"))-liW*options.slideBy;thumbList.animate({left:offsetL+"px"},options.speed,options.easeThumb)}Pointer+=options.slideBy;focusTo(Pointer);if(!options.leftArrow){back.fadeTo("fast",1)}}else{if(options.loop){if(options.thumb){thumbList.animate({left:"0px"},options.speed,options.easeThumb)}Pointer=0;focusTo(0)}else{next.fadeTo("fast",0.5)}}return false});back.click(function(){if(Pointer!=0){if(options.thumb){var offsetL=parseInt(thumbList.css("left"))+liW*options.slideBy;thumbList.animate({left:offsetL+"px"},options.speed,options.easeThumb)}Pointer-=options.slideBy;focusTo(Pointer);if(!options.rightArrow){next.fadeTo("fast",1);if(Pointer==0)back.fadeTo("fast",0.5)}}return false})})}};$.fn.slideView=$.iSlideView.build})(jQuery);

[William Bruno 1501]

qndo é assim, não rola ler o arquivo .min

 

http://pagetalks.com/share/slideView/slideView.1.2.js

 

como são as tuas imagens, e pastas ?

 

isso aqui:

var defaults = {
			thumb: true,
			thumbPrefix: "thumb_",
			frame: {
				isExist: false
			},
			slideBy : 1,
			speed: 350,
			easeOut: "swing",
			easeIn: "swing",
			easeThumb: "swing",
			loop: false,
			interval: 5000
		},

você pode configurar qndo chama o slide:

$("#slideshow").slideView({
		loop: true
	});

ou seja:

$("#slideshow").slideView({
		loop: true,
		thumbPrefix: 'mini'
	});

[xtroino 0]

Obrigado pela ajuda William,

 

Eu tenho uma pasta img onde coloco todas as imagens e dentro da pasta img surge uma pasta thumbnails onde são colocadas as imagens reduzidas.

[William Bruno 1501]

hum! até que é bem inteligente o script cara..

olha:

 

$(function() {
	$("#slideshow").slideView({
		loop: true,
		thumbPrefix: 'thumbnails/thumb_'
	});
});

com isso:

images/1.jpg

e a miniatura dela:

images/thumbnails/thumb_1.jpg

 

entendeu? basta incluir a pasta ali..

se no teu caso, a miniatura, tiver o mesmo nome da grande:

thumbPrefix: 'thumbnails/'

:lol:

[xtroino 0]

Valeu William

 

Funcionou certinho.

Agora só tou com o problema de redimensionar as imagens com o thumb_

 

Obrigado

[William Bruno 1501]

não entendi.

[xtroino 0]

não entendi.

 

É possível redimensionar só as imagens com o prefixo thumb_ ?

[William Bruno 1501]

isso você deve fazer com o server-side cara...

 

não tô entendendo..

 

 

na hora que o cara fizer o upload, você usa a tua linguagem server-side, para criar 2 imagens... a miniatura, e a grande..

[xtroino 0]

isso você deve fazer com o server-side cara...

 

não tô entendendo..

 

 

na hora que o cara fizer o upload, você usa a tua linguagem server-side, para criar 2 imagens... a miniatura, e a grande..

 

OK, estava pensando utilizar apenas uma imagem e depois na página fazer o redimensionamento dela.

[William Bruno 1501]

não acho que fique 'bom'.. mas então da pra você fazer com HTML/CSS

 

[Resolvido]