← Javascript

ThumbnailViewer - Pequena Alteração

Lida 4186 vezes

Offline

espaconline 
Elite
Mensagens 1066 Gostos 10
Feedback +10

Troféus totais: 31
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Boas,

A situação é a seguinte, precisava de um script que ao passar o rato sobre um link uma imagem aparecia num determinado local. Este script funciona a 99,9%.

O problema é que só funciona se o url da imagem estiver dentro da tag "href", mas como eu preciso dessa tag para um link, criei a tag "foto". Com uma pequena modificação no javascript, ele funciona, mas o load das imagens é muito lento e preciso de passar o rato sobre 2/3 links para começarem a aparecer as imagens.

Se colocar na tag "href" o link da imagem, então aparece logo.

O código original é este:

Código: [Seleccione]
/*Image Thumbnail Viewer II (May 19th, 2010)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Last updated: Sept 26th, 2010: http://www.dynamicdrive.com/forums/showthread.php?t=57892

jQuery.thumbnailviewer2={
loadmsg: '<img src="images/spinningred.gif" />', //HTML for loading message. Make sure image paths are correct

/////NO NEED TO EDIT BEYOND HERE////////////////

dsetting: {trigger:'mouseover', preload:'yes', fx:'none', fxduration:50, enabletitle:'yes'}, //default settings
buildimage:function($, $anchor, setting){
var imghtml='<img src="'+$anchor.attr('href')+'" style="border-width:0"/>'
if (setting.link)
imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
return $(imghtml)
},

showimage:function($image, setting){
$image.stop()[setting.fxfunc](setting.fxduration, function(){
if (this.style && this.style.removeAttribute)
this.style.removeAttribute('filter') //fix IE clearType problem when animation is fade-in
})
}

}


jQuery.fn.addthumbnailviewer2=function(options){
var $=jQuery

return this.each(function(){ //return jQuery obj
if (this.tagName!="A")
return true //skip to next matched element

var $anchor=$(this)
var s=$.extend({}, $.thumbnailviewer2.dsetting, options) //merge user options with defaults
s.fxfunc=(s.fx=="fade")? "fadeIn" : "show"
s.fxduration=(s.fx=="none")? 0 : parseInt(s.fxduration)
if (s.preload=="yes"){
var hiddenimage=new Image()
hiddenimage.src=this.href
}
var $loadarea=$('#'+s.targetdiv)
var $hiddenimagediv=$('<div />').css({position:'absolute',visibility:'hidden',left:-10000,top:-10000}).appendTo(document.body) //hidden div to load enlarged image in
var triggerevt=s.trigger+'.thumbevt' //"click" or "mouseover"
$anchor.unbind(triggerevt).bind(triggerevt, function(){
if ($loadarea.data('$curanchor')==$anchor) //if mouse moves over same element again
return false
$loadarea.data('$curanchor', $anchor)
if ($loadarea.data('$queueimage')){ //if a large image is in the queue to be shown
$loadarea.data('$queueimage').unbind('load') //stop it first before showing current image
}
$loadarea.html($.thumbnailviewer2.loadmsg)
var $hiddenimage=$hiddenimagediv.find('img')
if ($hiddenimage.length==0){ //if this is the first time moving over or clicking on the anchor link
var $hiddenimage=$('<img src="'+this.href+'" />').appendTo($hiddenimagediv) //populate hidden div with enlarged image
$hiddenimage.bind('loadevt', function(e){ //when enlarged image has fully loaded
var $targetimage=$.thumbnailviewer2.buildimage($, $anchor, s).hide() //create/reference actual enlarged image
$loadarea.empty().append($targetimage) //show enlarged image
$.thumbnailviewer2.showimage($targetimage, s)
})
$loadarea.data('$queueimage', $hiddenimage) //remember currently loading image as image being queued to load
}

if ($hiddenimage.get(0).complete)
$hiddenimage.trigger('loadevt')
else
$hiddenimage.bind('load', function(){$hiddenimage.trigger('loadevt')})
return false
})
})
}

jQuery(document).ready(function($){
var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
$anchors.each(function(i){
var options={}
var rawopts=this.getAttribute('rev').split(',') //transform rev="x:value1,y:value2,etc" into a real object
for (var i=0; i<rawopts.length; i++){
var namevalpair=rawopts[i].split(/:(?!\/\/)/) //avoid spitting ":" inside "http://blabla"
options[jQuery.trim(namevalpair[0])]=jQuery.trim(namevalpair[1])
}
$(this).addthumbnailviewer2(options)
})
})


A única alteração que fiz foi esta:

Código: [Seleccione]
var imghtml='<img src="'+$anchor.attr('foto')+'" style="border-width:0"/>'


O HTML é algo do tipo:

Código: [Seleccione]
<a href="urldapagina.php" foto="urldaimg" rel="enlargeimage" rev="targetdiv:loadarea">texto</a>


Desde já agradeço a vossa ajuda !
Offline

Pedro Magalhães 
Membro
Mensagens 397 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Aparentemente, tens de mudar o atributo href para foto sempre que aparece no código javascript. Já experimentaste e não funcionou?
Offline

cpdesign 
Membro
Mensagens 235 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

experimenta um link vazio <a href="#">
Offline

espaconline 
Elite
Mensagens 1066 Gostos 10
Feedback +10

Troféus totais: 31
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Obrigado pela ajuda, mas já resolvi o problema.

Não foi preciso alterar nada, apenas acrescentar o seguinte:

<a href="urldaimagem" foto="urldaimg" rel="enlargeimage" rev="targetdiv:loadarea,link:aquivaiolink">texto</a>

Agora, estou é com outro problema, relacionado com o "mouseout". Se alguém me puder ajudar, agradeço uma PM para enviar mais detalhes do problema.