CSS Codes
CSS Layouts
Results 1 to 3 of 3

Thread: Load other header image on img thumb click with fade

  1. 08-28-2012, 09:55 AM #1
    Joepiooo
    Joepiooo is offline New Comer (less than 5 posts)
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Load other header image on img thumb click with fade

    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...
    Reply With Quote Reply With Quote
  2. 08-28-2012, 12:21 PM #2
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  3. 08-28-2012, 01:58 PM #3
    Joepiooo
    Joepiooo is offline New Comer (less than 5 posts)
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

    Code:
    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 Code:
    <?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/dynamici...thumbnail2.htm
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Ultimate Fade-in slideshow - Pause when thumb selected
    By easycoder in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-21-2012, 11:30 AM
  2. Thumb Viewer Enlarge Using Different Thumb and Source Image
    By mondealenvers in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-12-2010, 05:51 PM
  3. click on image on page load
    By lord22 in forum JavaScript
    Replies: 11
    Last Post: 08-03-2008, 09:05 PM
  4. image content download on header click
    By rich1234 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-15-2008, 06:11 PM
  5. On click small image load large image.
    By gurrilla in forum JavaScript
    Replies: 0
    Last Post: 07-09-2007, 03:20 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules