Log in

View Full Version : Load other header image on img thumb click with fade


Joepiooo
08-28-2012, 09:55 AM
Hello,

I have a website with a header image in a div. In my content I have different images that are clickable... What I want is when you click one of the images is that the header fades into the thumb image I just clicked...

I dont know where to start but maybe someone has got an example?

My images are loaded dynamically from a database. But when somebody has got a static solution that is fine too.

Thanks in advance!

PS: Sorry for the bad english...
vwphillips
08-28-2012, 12:21 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>

<input type="button" name="" value="Next +ve" onmouseup="zxcFadeSS.Next('slide',1);" />
<input type="button" name="" value="Next -ve" onmouseup="zxcFadeSS.Next('slide',-1);" />
<input type="button" name="" value="GoTo 1" onmouseup="zxcFadeSS.GoTo('slide',0);" />
<input type="button" name="" value="GoTo 2" onmouseup="zxcFadeSS.GoTo('slide',1);" />
<input type="button" name="" value="GoTo 3" onmouseup="zxcFadeSS.GoTo('slide',2);" />
<input type="button" name="" value="GoTo 4" onmouseup="zxcFadeSS.GoTo('slide',3);" />
<br />

<div>
<a href="#">
<img src="http://i1253.photobucket.com/albums/hh590/vzcrdo5/food1.jpg" id="slide" border=0 width="630" height="300" scrolling="yes" ></a>
</div>
<img src="http://i1253.photobucket.com/albums/hh590/vzcrdo5/GivingHeart-3.jpg" alt="img" width="100" onmouseup="zxcFadeSS.GoTo('slide',0);"/>
<img src="http://i1253.photobucket.com/albums/hh590/vzcrdo5/StartaClub-1.jpg" alt="img" width="100" onmouseup="zxcFadeSS.GoTo('slide',1);"/>
<img src="http://i1253.photobucket.com/albums/hh590/vzcrdo5/FoodTrucks-1.jpg" alt="img" width="100" onmouseup="zxcFadeSS.GoTo('slide',2);"/>
<img src="http://i1253.photobucket.com/albums/hh590/vzcrdo5/SocialNetwork.jpg" alt="img" width="100" onmouseup="zxcFadeSS.GoTo('slide',3);"/>
<script type="text/javascript">
/*<![CDATA[*/
// Fade Slide Show (26-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcFadeSS={

init:function(o){
var id=o.ID,img=document.getElementById(id),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?ms:1000,hold=typeof(hold)=='number'?hold: ms*2,srt=o.AutoStart,clone=document.createElement('IMG'),src,z0=0;
for (;z0<ary.length;z0++){
src=ary[z0][0];
ary[z0][0]=new Image();
ary[z0][0].src=src;
}
clone.style.position='absolute';
clone.style.zIndex='101';
clone.style.left='-3000px';
clone.style.top='-3000px';
clone.style.width=img.width+'px';
clone.style.height=img.height+'px';
document.body.appendChild(clone);
this['zxc'+o.ID]={
id:id,
img:img,
a:img.parentNode,
clone:clone,
ary:ary,
lgth:z0-1,
ms:ms,
hold:hold,
cnt:0,
ud:1
};
if (typeof(srt)=='number'){
this.Auto(id,srt);
}
},

Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
this.inc(o,o.cnt+ud);
this.rotate(o,false);
}
},

GoTo:function(id,nu){
var o=this['zxc'+id];
if (o&&o.ary[nu]&&nu!=o.cnt){
o.cnt=nu;
this.rotate(o,false);
}
},

Auto:function(id,ms){
var oop=this,o=this['zxc'+id];
if (o){
o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
}
},

Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},

inc:function(o,nu){
o.cnt=nu>o.lgth?0:nu<0?o.lgth:nu
},

rotate:function(o,auto){
var p=this.pos(o.img);
this.Pause(o.id);
o.auto=auto===true;
if (o.auto){
this.inc(o,o.cnt+o.ud);
}
o.a.removeAttribute('href');
if (o.ary[o.cnt][1]){
o.a.href=o.ary[o.cnt][1];
}
o.clone.src=o.ary[o.cnt][0].src;
o.clone.style.left=p[0]+'px';
o.clone.style.top=p[1]+'px';
clearTimeout(o.dly);
this.animate(o,0,100,new Date(),o.ms);
},

animate:function(o,f,t,srt,mS){
var oop=this,obj=o.clone,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
}
else {
o.img.src=obj.src
obj.style.left='-3000px';
if (o.auto){
oop.Auto(o.id,o.hold);
}
}
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}


}

zxcFadeSS.init({
ID:'slide', // the unique ID name of the image. (string)
ImageArray:[ // an array defining the slide show images SRCs and link HREFs. (array)
["http://i1253.photobucket.com/albums/hh590/vzcrdo5/GivingHeart-3.jpg","http://childrenshospitalsnationalfoundation.org/Giving_Campaign.html"],
["http://i1253.photobucket.com/albums/hh590/vzcrdo5/StartaClub-1.jpg","http://childrenshospitalsnationalfoundation.org/K.I.D.S.html"],
["http://i1253.photobucket.com/albums/hh590/vzcrdo5/FoodTrucks-1.jpg","http://childrenshospitalsnationalfoundation.org/Food_Truck_Festival.html"],
["http://i1253.photobucket.com/albums/hh590/vzcrdo5/SocialNetwork.jpg","http://childrenshospitalsnationalfoundation.org/Social_Network.html"]
],
FadeDuration:1000, //(optional) the fade duration in milli seconds. (number, default = 1000)
HoldDuration:2000, //(optional) the auto rotation fade duration in milli seconds. (number, default = FadeDuration)
AutoStart:false //(optional) the delay before starting auto rotation. (number, default = no auto start)
})

/*]]>*/
</script>
</body>

</html>
Joepiooo
08-28-2012, 01:58 PM
Hi,

I got this script working now... Only problem with this is that it does not directly load the first image on page load...

How can I make that possible?


jQuery.noConflict()

jQuery.merkviewer={
loadmsg: '<img src="spinningred.gif" /><br />Loading Large Image...', //HTML for loading message. Make sure image paths are correct

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

dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, 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.addmerkviewer=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({}, $.merkviewer.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($.merkviewer.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=$.merkviewer.buildimage($, $anchor, s).hide() //create/reference actual enlarged image
$loadarea.empty().append($targetimage) //show enlarged image
$.merkviewer.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).addmerkviewer(options)
})
})


<?php
include_once "class/merken.class.php";
$merkclass = new merken($dbo);
?>
<div id="loadarea" style="position:absolute; top:100px; z-index:100;"></div>
<table border="1" class="bandenmerken">
<tr>
<?php
$merken = $merkclass->getMerken($website);
$counter = 0;
foreach($merken as $merk)
{
if($counter == 5)
{
echo "\t\t\t</tr>
\t\t\t<tr>\n";
$counter = 0;
}
echo "\t\t\t\t<td>
\t\t\t\t\t<a href=\"".str_replace(".png", "_125.png", $merk->merk_foto)."\" width=\"125\" height=\"53\" alt=\"".$merk->merk_naam."\" rel=\"enlargeimage\" rev=\"targetdiv:loadarea,trigger:click,fxstring:fade,fxduration:1000\" class=\"logo\"><img src=\"http://www.url.net/preview/bnet/logos/".str_replace(".png", "_125.png", $merk->merk_logo)."\" width=\"125\" height=\"53\" alt=\"".$merk->merk_naam."\" rel=\"enlargeimage\" rev=\"targetdiv:loadarea\" class=\"logo\"/></a><br/>
\t\t\t\t\t<div class=\"types\">\n";
echo "\t\t\t\t\t</div>
\t\t\t\t</td>\n";
$counter++;
}

?>
</tr>
</table>

Thx for any help

PS I used a tutorial from this site:

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm