Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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);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.
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:
Valeu William
Funcionou certinho.
Agora só tou com o problema de redimensionar as imagens com o thumb_
Obrigado
não entendi.
>
não entendi.
É possível redimensionar só as imagens com o prefixo thumb_ ?
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..
>
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.
não acho que fique 'bom'.. mas então da pra você fazer com HTML/CSS
[Resolvido]
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:
$("#slideshow").slideView({
loop: true
}); ou seja:
$("#slideshow").slideView({
loop: true,
thumbPrefix: 'mini'
});