Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Mouseover Slideshow - Javascript:Warp ()

    Hi,

    After many hours spent trying to resolve this myself, I've finally accepted I'm not going to stumble across an answer. Would very much appreciate any guidance!

    Basically, I have a mouseover slideshow setup purely thanks to the Javascript Kit. It consists of three smaller images that feed into a larger one.

    I have also added code to change the accompanying text on rollover.

    The only problem I have, is that before the user hovers over one of the smaller images, the larger image doesn't link anywhere. Given that the 'a href' for the div is "javascript:warp()" is it still possible to have the larger image link to a url before any of the smaller images have been activated? Or will I need to recode completely to achieve this?

    If I haven't explained well enough, you can see the problem here - http://soundsenseonline.co.uk/

    Many Thanks,

    JD

    Code:
    <script>
    
    /*Rollover effect on different image script-
    By JavaScript Kit (http://javascriptkit.com)
    Over 200+ free scripts here!
    */
    
    function changeimage(towhat,url){
    if (document.images){
    document.images.targetimage.src=towhat.src
    gotolink=url
    }
    }
    function warp(){
    window.location=gotolink
    }
    
    </script>
    <script language="JavaScript1.1">
    var myimages=new Array()
    var gotolink="#"
    
    function preloadimages(){
    for (i=0;i<preloadimages.arguments.length;i++){
    myimages[i]=new Image()
    myimages[i].src=preloadimages.arguments[i]
    }
    }
    
    
    preloadimages("http://soundsenseonline.co.uk/featuredcontentimages/1.png","http://soundsenseonline.co.uk/featuredcontentimages/2.png","http://soundsenseonline.co.uk/featuredcontentimages/3.png")
    </script>
    
    </head>
    
    <body>
    
     <div class="featuredcontentall">
     <div class="featuredcontent">
    
    <a href="javascript:warp()"><img src="http://soundsenseonline.co.uk/featuredcontentimages/1.png" width="740" height="327" name="targetimage" border=0>
    <div id="featuredcontenttext">Stateside Selection: The Material</div>
    </div></a>
    <div class="featuredcontentslides">
    
    <a href="http://soundsenseonline.co.uk/2011/07/stateside-selection-the-material/" onMouseover="changeimage(myimages[0],this.href)
    document.getElementById('featuredcontenttext').firstChild.data = 'Stateside Selection: The Material'; return true;"><img src="http://soundsenseonline.co.uk/featuredcontentimages/1s.png" width="238" /></a>
    
    <a href="http://soundsenseonline.co.uk/2011/07/sarah-jarosz-live-the-greystones-sheffield-17072011/" onMouseover="changeimage(myimages[1],this.href)
    document.getElementById('featuredcontenttext').firstChild.data = 'Live Review: Sarah Jarosz @ The Greystones, Sheffield 17/07/2011'; return true;"><img src="http://soundsenseonline.co.uk/featuredcontentimages/2s.png" width="238"/></a>
    
    <a href="http://soundsenseonline.co.uk/2011/05/mc-lars-weerd-science/" onMouseover="changeimage(myimages[2],this.href)
    document.getElementById('featuredcontenttext').firstChild.data = 'Exclusive: MC Lars & Weerd Science - Live Performance and Interview'; return true;"><img src="http://soundsenseonline.co.uk/featuredcontentimages/3s.png" width="238"/></a>
    
    </div></div>
    </body>

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    JDSSO:

    That code is obsolete.

    I have the following, which does what you want. The "larger" image is a link, the .href value of that particular thumbnail. The "first" image/link is inserted when the document loads.

    Change the .hrefs and images to whatever you choose.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>None</title>
    <script type="text/javascript">
    
    /*   Thumbnail Image Swap onmouseover With Fade and Caption Overlay, Larger Image is a Link */
    /*   Copyright 2009, Michael J. Hill.  All rights reserved. Used with permission.  www.javascript-demos.com */
    /*   Free use of the code, so long as this notice is kept intact */
    
    	var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;
    	var fullSizeImg = "";	
    	var nGallery = "";
    	var nInterval = "";
    	var placeHolderImg = document.createElement('img');
    
    	function swapFadeDone(nInterval){
    
    		clearInterval(nInterval);
    		for (i=0; i<nGallery.length; i++)
    			{
    			 nGallery[i].onmouseover = function()
    				{				
    				 if (this.getElementsByTagName('img')[0].src == fullSizeImg.getElementsByTagName('img')[0].src)
    				 	{
    					 return;
    					}	
    			 	 swapFullSize(fullSizeImg,this);
    				 for (n=0; n<nGallery.length; n++)
    					{
    				 	 nGallery[n].onmouseover = null;
    					}
    				}			
    			}		
    	}
    
    	function brushIn(currImg,nextImg){
    
    		clearInterval(nInterval);		
    		currImg.src = nextImg;
    		var nOpacity = 0;	
    		nInterval = setInterval(function()
    			{
    			 nOpacity < 100 ? nOpacity = nOpacity + 10 : swapFadeDone(nInterval);
    			 IE ? currImg.style.filter = "alpha(opacity = "+nOpacity+")"
    			    : currImg.style.opacity = (nOpacity / 100); 
    			}, 2);			
    	}
    
    	function brushOut(currImg,nextImg){
    
    		var nOpacity = 100;		
    		nInterval = setInterval(function()
    			{
    			 nOpacity > 0 ? nOpacity = nOpacity - 10 : brushIn(currImg,nextImg);
    			 IE ? currImg.style.filter = "alpha(opacity = "+nOpacity+")"
    			    : currImg.style.opacity = (nOpacity / 100); 
    			}, 2);		
    	}
    
    	function swapFullSize(fullSizeImgContainer,nextImg){
    
    		var currFullImg = fullSizeImgContainer.getElementsByTagName('img')[0];
    		var nextFullImg = nextImg.getElementsByTagName('img')[0].src;
    		placeHolderImg.src = nextFullImg;		
    		setTimeout(function()
    			{
    			 brushOut(currFullImg,placeHolderImg.src);
    			}, 10);
    	}
    
    	function init(){
    
    		var nSheet = document.styleSheets;
    		for (i=0; i<nSheet.length; i++)
    			{
    			 IE ? nRule = nSheet[i].rules : nRule = nSheet[i].cssRules;
    			 for (n=0; n<nRule.length; n++)
    				{
    			 	 if (nRule[n].selectorText == ".caption_overlay")
    					{
    				 	 var captionClass = nRule[n];
    					}
    				}
    			}	
    		var nCaption = [];
    		var nDiv = document.getElementsByTagName('div');
    		for (i=0; i<nDiv.length; i++)
    			{
    			 if (nDiv[i].className == "fullSize")
    				{
    				 fullSizeImg = nDiv[i];
    				 fullSizeImg.onclick = function()
    					{
    					 for (i=0; i<nGallery.length; i++)
    						{
    						 if (nGallery[i].getElementsByTagName('img')[0].src == this.getElementsByTagName('img')[0].src)
    						 	{
    							 location.href = nGallery[i].href;
    							}
    						}
    					}
    				}	
    			 if (nDiv[i].className == "thumbNail")
    				{
    				 nGallery = nDiv[i].getElementsByTagName('a');
    				}	
    			 if (nDiv[i].className == "caption_overlay")
    				{
    				 var captionContainer = nDiv[i];				 			 
    				}				
    			}		
    		for (i=0; i<nGallery.length; i++)
    			{
    			 nCaption[i] = nGallery[i].getElementsByTagName('img')[0].alt;
    			 nGallery[i].getElementsByTagName('img')[0].alt = "";
    			 nGallery[i].getElementsByTagName('img')[0].title = "";
    			 nGallery[i].getElementsByTagName('img')[0].style.border = "none";
    			 nGallery[i].onmouseover = function()
    				{			
    				 if (this.getElementsByTagName('img')[0].src == fullSizeImg.getElementsByTagName('img')[0].src)
    				 	{
    					 return;
    					}									 
    				 swapFullSize(fullSizeImg,this);
    				 for (n=0; n<nGallery.length; n++)
    					{
    				 	 nGallery[n].onmouseover = null;
    					}				
    				}							
    			 nGallery[i].onclick = function(){return false;};			 
    			}		
    		fullSizeImg.onmouseover = function()
    			{				
    			 for (i=0; i<nGallery.length; i++)
    				{
    				 if (this.getElementsByTagName('img')[0].src == nGallery[i].getElementsByTagName('img')[0].src)
    					{
    					 captionContainer.innerHTML = nCaption[i];					
    					}
    				}
    			 captionClass.style.display = "";
    			 this.onmouseout = function()
    				{
    				 captionClass.style.display = "none";
    				}
    			}		
    	}
    
    	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	 body {background-color: #f0fff0;}
    	.wrapper {width: 600px; margin-left: auto; margin-right: auto; margin-top: 50px; 
    		  background-color: #fafad2;}
    	.fullSize {position: relative; width: 600px; text-align: center; cursor: pointer;}
    	.fullSize img {width: 500px;}	
    	.thumbNail {width: 100%; border: 1px solid black; text-align: center;
    		    margin-left: auto; margin-right: auto; margin-top: 3px;}
    	.thumbNail img {border: 1px solid blue; margin-left: 15px; margin-top: 5px; margin-bottom: 0px;
    			width: 60px; height: 45px;}	
    	.caption_overlay {position: absolute; top: 60px; left: 0px; background-color: #e6e6fa; 
    			  height: 18px; color: #00008b; font-family: arial; font-size: 10pt; 
    			  text-align: center; width: 100%; display: none;}
    </style>
    </head>
    	<body>
    		<div class="wrapper">
    			<div class="fullSize">
    				<img src="./images/hard_rock.jpg">	
    				<div class="caption_overlay"></div>		
    			</div>
    			<div class="thumbNail">
    				<a href="./images/hard_rock.jpg"><img src="./images/hard_rock.jpg" alt="First Image Description" title="First Image Description"></a>
    				<a href="./images/free_stamp.jpg"><img src="./images/free_stamp.jpg" alt="Second Image Description" title="Second Image Description"></a>
    				<a href="./images/playhouse.jpg"><img src="./images/playhouse.jpg" alt="Third Image Description" title="Third Image Description"></a>
    				<a href="./images/old_court.jpg"><img src="./images/old_court.jpg" alt="Fourth Image Description" title="Fourth Image Description"></a>
    				<a href="./images/society_tower.jpg"><img src="./images/society_tower.jpg" alt="Fifth Image Description" title="Fifth Image Description"></a>
    				<a href="./images/skyline.jpg"><img src="./images/skyline.jpg" alt="Sixth Image Description" title="Sixth Image Description"></a>
    			</div>
    		</div>
    	</body>
    </html>

  • Users who have thanked Sciliano for this post:

    JDSSO (07-30-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sciliano,

    Many thanks for that - the code is working nicely!

    The only problem that this method gives me is with regards the quality of the smaller images (alas, shrinking the larger image doesn't give professional looking results - as you can see on my homepage at the moment).

    To combat this previously, I was shrinking the image down manually and saving as a different file. Thus for each of the three images being used, I had a large version, and a small version.

    Do you have any suggestions on how the use of two separate image files (per image) could be implemented within your code?

    Once again, sorry if I haven't explained myself too well here - or if there's something very simple I'm missing. Brain is feeling pretty addled from trying to get this all to work over the last couple of days!

    Thanks again - really appreciate your help.

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    JDSSO:

    With the following, I made the "larger" images have file names like this:

    hard_rock_large.jpg

    and

    playhouse_large.jpg

    The thumbnail file names are as is.

    I tested this with only 3 images, but it seems to work.

    Again, the href links can be anything you choose as is the number of thumbnails.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>None</title>
    <script type="text/javascript">
    
    /*   Thumbnail Image Swap onmouseover With Fade and Caption Overlay, Larger Image is a Link */
    /*   Copyright 2009, Michael J. Hill.  All rights reserved. Used with permission.  www.javascript-demos.com */
    /*   Free use of the code, so long as this notice is kept intact */
    
    	var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;
    	var fullSizeImg = "";	
    	var nGallery = "";
    	var nInterval = "";
    	var placeHolderImg = document.createElement('img');
    
    	function swapFadeDone(){
    
    		clearInterval(nInterval);
    		for (i=0; i<nGallery.length; i++)
    			{
    			 nGallery[i].onmouseover = function()
    				{			
    				 if (this.getElementsByTagName('img')[0].src == fullSizeImg.getElementsByTagName('img')[0].src.replace("_large", ""))
    				 	{
    					 return;
    					}	
    			 	 swapFullSize(fullSizeImg,this);
    				 for (n=0; n<nGallery.length; n++)
    					{
    				 	 nGallery[n].onmouseover = null;
    					}
    				}			
    			}		
    	}
    
    	function brushIn(currImg,nextImg){
    
    		clearInterval(nInterval);		
    		currImg.src = nextImg;
    		var nOpacity = 0;	
    		nInterval = setInterval(function()
    			{
    			 nOpacity < 100 ? nOpacity = nOpacity + 10 : swapFadeDone();
    			 IE ? currImg.style.filter = "alpha(opacity = "+nOpacity+")"
    			    : currImg.style.opacity = (nOpacity / 100); 
    			}, 2);			
    	}
    
    	function brushOut(currImg,nextImg){
    
    		var nOpacity = 100;		
    		nInterval = setInterval(function()
    			{
    			 nOpacity > 0 ? nOpacity = nOpacity - 10 : brushIn(currImg,nextImg);
    			 IE ? currImg.style.filter = "alpha(opacity = "+nOpacity+")"
    			    : currImg.style.opacity = (nOpacity / 100); 
    			}, 2);		
    	}
    
    	function swapFullSize(fullSizeImgContainer,nextImg){
    
    		var currFullImg = fullSizeImgContainer.getElementsByTagName('img')[0];
    		var nextFullImg = nextImg.getElementsByTagName('img')[0].src.replace(/(.jpg)/,"_large$1");
    		placeHolderImg.src = nextFullImg;		
    		setTimeout(function()
    			{
    			 brushOut(currFullImg,placeHolderImg.src);
    			}, 10);
    	}
    
    	function init(){
    
    		var nSheet = document.styleSheets;
    		for (i=0; i<nSheet.length; i++)
    			{
    			 IE ? nRule = nSheet[i].rules : nRule = nSheet[i].cssRules;
    			 for (n=0; n<nRule.length; n++)
    				{
    			 	 if (nRule[n].selectorText == ".caption_overlay")
    					{
    				 	 var captionClass = nRule[n];
    					}
    				}
    			}	
    		var nCaption = [];
    		var nDiv = document.getElementsByTagName('div');
    		for (i=0; i<nDiv.length; i++)
    			{
    			 if (nDiv[i].className == "fullSize")
    				{
    				 fullSizeImg = nDiv[i];
    				 fullSizeImg.onclick = function()
    					{
    					 for (i=0; i<nGallery.length; i++)
    						{
    						 if (nGallery[i].getElementsByTagName('img')[0].src == this.getElementsByTagName('img')[0].src)
    						 	{
    							 location.href = nGallery[i].href;
    							}
    						}
    					}
    				}	
    			 if (nDiv[i].className == "thumbNail")
    				{
    				 nGallery = nDiv[i].getElementsByTagName('a');
    				}	
    			 if (nDiv[i].className == "caption_overlay")
    				{
    				 var captionContainer = nDiv[i];				 			 
    				}				
    			}		
    		for (i=0; i<nGallery.length; i++)
    			{
    			 nCaption[i] = nGallery[i].getElementsByTagName('img')[0].alt;
    			 nGallery[i].getElementsByTagName('img')[0].alt = "";
    			 nGallery[i].getElementsByTagName('img')[0].title = "";
    			 nGallery[i].getElementsByTagName('img')[0].style.border = "none";
    			 nGallery[i].onmouseover = function()
    				{			
    				 if (this.getElementsByTagName('img')[0].src == fullSizeImg.getElementsByTagName('img')[0].src.replace("_large", ""))
    				 	{
    					 return;
    					}									 
    				 swapFullSize(fullSizeImg,this);
    				 for (n=0; n<nGallery.length; n++)
    					{
    				 	 nGallery[n].onmouseover = null;
    					}				
    				}							
    			 nGallery[i].onclick = function(){return false;};			 
    			}		
    		fullSizeImg.onmouseover = function()
    			{				
    			 for (i=0; i<nGallery.length; i++)
    				{
    				 if (this.getElementsByTagName('img')[0].src == nGallery[i].getElementsByTagName('img')[0].src.replace(/(.jpg)/,"_large$1"))
    					{
    					 captionContainer.innerHTML = nCaption[i];					
    					}
    				}
    			 captionClass.style.display = "";
    			 this.onmouseout = function()
    				{
    				 captionClass.style.display = "none";
    				}
    			}		
    	}
    
    	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	 body {background-color: #f0fff0;}
    	.wrapper {width: 600px; margin-left: auto; margin-right: auto; margin-top: 50px; 
    		  background-color: #fafad2;}
    	.fullSize {position: relative; width: 600px; text-align: center; cursor: pointer;}
    	.fullSize img {width: 500px;}	
    	.thumbNail {width: 100%; border: 1px solid black; text-align: center;
    		    margin-left: auto; margin-right: auto; margin-top: 3px;}
    	.thumbNail img {border: 1px solid blue; margin-left: 15px; margin-top: 5px; margin-bottom: 0px;
    			width: 60px; height: 45px;}	
    	.caption_overlay {position: absolute; top: 60px; left: 0px; background-color: #e6e6fa; 
    			  height: 18px; color: #00008b; font-family: arial; font-size: 10pt; 
    			  text-align: center; width: 100%; display: none;}
    </style>
    </head>
    	<body>
    		<div class="wrapper">
    			<div class="fullSize">
    				<img src="./images/hard_rock.jpg">	
    				<div class="caption_overlay"></div>		
    			</div>
    			<div class="thumbNail">
    				<a href="./images/hard_rock.jpg"><img src="./images/hard_rock.jpg" alt="First Image Description" title="First Image Description"></a>
    				<a href="./images/free_stamp.jpg"><img src="./images/free_stamp.jpg" alt="Second Image Description" title="Second Image Description"></a>
    				<a href="./images/playhouse.jpg"><img src="./images/playhouse.jpg" alt="Third Image Description" title="Third Image Description"></a>				
    			</div>
    		</div>
    	</body>
    </html>
    Last edited by Sciliano; 07-31-2011 at 12:17 AM. Reason: correct an error

  • Users who have thanked Sciliano for this post:

    JDSSO (07-31-2011)

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    JDSSO:

    I edited the code in the previous post to correct an error regarding hovering on an already selected thumbnail.

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sciliano,

    I've just tried out the latest code but didn't seem to work so well this time. The image src wasn't changing to the '_large' files, and there were also inconsistancies when hovering over the linked images - i.e. transitions weren't anywhere near as smooth and would sometimes take a few attempts to work.

    Any suggestions?

    Thanks again!

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    JDSSO

    Yes, I understand. I know what the problem is. I'll fix it, then upload a demo using some fairly large images.

    Check back in an hour or so.

  • #8
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    JDSSO:

    Here's the demo

    Just copy the code for yourself using View | Source

    Works well for me in IE and FF.

    Some changes were made to the code after I uploaded it,including adjustments to the fade timing. Check it again for the latest version.
    Last edited by Sciliano; 07-31-2011 at 06:39 PM. Reason: improvements

  • Users who have thanked Sciliano for this post:

    JDSSO (07-31-2011)

  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sciliano,

    Code is working brilliantly now! Many many thanks for your help.

    Best Wishes,

    JD

  • #10
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    You're welcome, JD. Same to you.

  • #11
    New Coder
    Join Date
    Aug 2011
    Location
    Ontario, Canada
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sciliano,

    I was hoping you would be able to help me out with my problem. I have created a slideshow similar to the one you have here but the difference is my large images changes with a click on the thumbnails. The problem I am having is I am unable to add an "onmouseover" caption to the large image. Any chance you could look over my code and give me your thoughts and/or suggestions.

    Your help would be greatly appreciated. Many thanks.
    bg.

    HTML Code:
    Code:
    <div id="multimedia_container">
    <div id="gallery">
      <div id="imagearea">
        <div id="image">
          <a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a>
          <a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
        </div>
      </div>
      <div id="thumbwrapper">
        <div id="thumbarea">
          <ul id="thumbs">
            <li value="1"><img src="selects/thumbs/selects1.jpg" width="152" height="100" alt="" /></li>
            <li value="2"><img src="selects/thumbs/selects2.jpg" width="152" height="100" alt="" /></li>
            <li value="3"><img src="selects/thumbs/selects3.jpg" width="152" height="100" alt="" /></li>
            <li value="4"><img src="selects/thumbs/selects4.jpg" width="152" height="100" alt="" /></li>
            <li value="5"><img src="selects/thumbs/selects5.jpg" width="152" height="100" alt="" /></li>
            <li value="6"><img src="selects/thumbs/selects6.jpg" width="152" height="100" alt="" /></li>
            <li value="7"><img src="selects/thumbs/selects7.jpg" width="152" height="100" alt="" /></li>
            <li value="8"><img src="selects/thumbs/selects8.jpg" width="152" height="100" alt="" /></li>
            <li value="9"><img src="selects/thumbs/selects9.jpg" width="152" height="100" alt="" /></li>
            <li value="10"><img src="selects/thumbs/selects10.jpg" width="152" height="100" alt="" /></li>
            <li value="11"><img src="selects/thumbs/selects11.jpg" width="152" height="100" alt="" /></li>
            <li value="12"><img src="selects/thumbs/selects12.jpg" width="152" height="100" alt="" /></li>
            <li value="13"><img src="selects/thumbs/selects13.jpg" width="152" height="100" alt="" /></li>
            <li value="14"><img src="selects/thumbs/selects14.jpg" width="152" height="100" alt="" /></li>
            <li value="15"><img src="selects/thumbs/selects15.jpg" width="152" height="100" alt="" /></li>
            <li value="16"><img src="selects/thumbs/selects16.jpg" width="152" height="100" alt="" /></li>
            <li value="17"><img src="selects/thumbs/selects17.jpg" width="152" height="100" alt="" /></li>
            <li value="18"><img src="selects/thumbs/selects18.jpg" width="152" height="100" alt="" /></li>
            <li value="19"><img src="selects/thumbs/selects19.jpg" width="152" height="100" alt="" /></li>
            <li value="20"><img src="selects/thumbs/selects20.jpg" width="152" height="100" alt="" /></li>
            <li value="21"><img src="selects/thumbs/selects21.jpg" width="152" height="100" alt="" /></li>
            <li value="22"><img src="selects/thumbs/selects22.jpg" width="152" height="100" alt="" /></li>
            <li value="23"><img src="selects/thumbs/selects23.jpg" width="152" height="100" alt="" /></li>
            <li value="24"><img src="selects/thumbs/selects24.jpg" width="152" height="100" alt="" /></li>
            <li value="25"><img src="selects/thumbs/selects25.jpg" width="152" height="100" alt="" /></li>
            <li value="26"><img src="selects/thumbs/selects26.jpg" width="152" height="100" alt="" /></li>
            <li value="27"><img src="selects/thumbs/selects27.jpg" width="152" height="100" alt="" /></li>
            <li value="28"><img src="selects/thumbs/selects28.jpg" width="152" height="100" alt="" /></li>
          </ul>
        </div>
      </div>
    
    <script type="text/javascript">
    var imgid = 'image';
    var imgdir = 'selects/large';
    var imgext = '.jpg';
    var thumbid = 'thumbs';
    var auto = false;
    var autodelay = 5;
    </script>
    <script type="text/javascript" src="slide.js"></script>
         </div>
        </div>

    Javascript Code:
    Code:
    var slideShow=function(){
    	var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;
    	ta=document.getElementById(thumbid); ia=document.getElementById(imgid);
    	t=ta.getElementsByTagName('li'); ie=document.all?true:false;
    	st=3; ss=3; ft=10; fs=5; xp,yp=0;
    	return{
    		init:function(){
    			document.onmousemove=this.pos; window.onresize=function(){setTimeout("slideShow.lim()",500)};
    			ys=this.toppos(ta); ye=ys+ta.offsetHeight;
    			len=t.length;tar=[];
    			for(i=0;i<len;i++){
    				var id=t[i].value; tar[i]=id;
    				t[i].onclick=new Function("slideShow.getimg('"+id+"')");
    				if(i==0){this.getimg(id)}
    			}
    			tarl=tar.length;
    		},
    		scrl:function(d){
    			clearInterval(ta.timer);
    			var l=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10)
    			ta.timer=setInterval(function(){slideShow.mv(d,l)},st);
    		},
    		mv:function(d,l){
    			ta.style.left=ta.style.left||'0px';
    			var left=ta.style.left.replace('px','');
    			if(d==1){
    				if(l-Math.abs(left)<=ss){
    					this.cncl(ta.id); ta.style.left='-'+l+'px';
    				}else{ta.style.left=left-ss+'px'}
    			}else{
    				if(Math.abs(left)-l<=ss){
    					this.cncl(ta.id); ta.style.left=l+'px';
    				}else{ta.style.left=parseInt(left)+ss+'px'}
    			}
    		},
    		cncl:function(){clearTimeout(ta.timer)},
    		getimg:function(id){
    			if(auto){clearTimeout(ia.timer)}
    			if(ci!=null){
    				var ts,tsl,x;
    				ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0;
    				for(x;x<tsl;x++){
    					if(ci.id!=id){var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)}
    				}
    			}
    			if(!document.getElementById(id)){
    				var i=document.createElement('img');
    				ia.appendChild(i);
    				i.id=id; i.av=0; i.style.opacity=0;
    				i.style.filter='alpha(opacity=0)';
    				i.src=imgdir+'/'+id+imgext;
    			}else{
    				i=document.getElementById(id); clearInterval(i.timer);
    			}
    			i.timer=setInterval(function(){slideShow.fdin(i)},fs);
    		},
    		nav:function(d){
    			var c=0;
    			for(key in tar){if(tar[key]==ci.id){c=key}}
    			if(tar[parseInt(c)+d]){
    				this.getimg(tar[parseInt(c)+d]);
    			}else{
    				if(d==1){
    					this.getimg(tar[0]);
    				}else{this.getimg(tar[tarl-1])}
    			}
    		},
    		auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)},
    		fdin:function(i){
    			if(i.complete){i.av=i.av+fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'}
    			if(i.av>=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i}
    		},
    		fdout:function(i){
    			i.av=i.av-fs; i.style.opacity=i.av/100;
    			i.style.filter='alpha(opacity='+i.av+')';
    			if(i.av<=0){clearInterval(i.timer); if(i.parentNode){i.parentNode.removeChild(i)}}
    		},
    		lim:function(){
    			var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4; 
    			bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa;
    		},
    		pos:function(e){
    			xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX; 
    			yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY;
    			if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){
    				slideShow.scrl(-1);
    			}else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){
    				slideShow.scrl(1);
    			}else{slideShow.cncl()}
    		},
    		leftpos:function(t){
    			var l=0;
    			if(t.offsetParent){
    				while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent}
    			}else if(t.x){l+=t.x}
    			return l;
    		},
    		toppos:function(t){
    			var p=0;
    			if(t.offsetParent){
    				while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent}
    			}else if(t.y){p+=t.y}
    			return p;
    		}
    	};
    }();
    
    window.onload=function(){slideShow.init(); slideShow.lim()};

  • #12
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    bornegraphics

    I already have an application which does what you want.

    It has a single row of thumbnails which scroll horizontally by clicking a left or right arrow.

    It allows up to 15 galleries per page and a maximum of 36 images per gallery.

    It maintains the aspect of both the thumbs and larger image.

    A screen shot of a typical gallery is attached.

    I can send you the .zip file, if you'd like. Contact me by email.

    Otherwise, sorry, I don't know how to modify your code.
    Attached Thumbnails Attached Thumbnails Mouseover Slideshow - Javascript:Warp ()-gallery.jpg  
    Last edited by Sciliano; 08-05-2011 at 02:08 PM.

  • #13
    New Coder
    Join Date
    Aug 2011
    Location
    Ontario, Canada
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I just sent you an email, regarding the zip file you offered. If you could pass that along to me when you have a chance I would greatly appreciate it.

    Does your file show the image description when you mouse over the large image or is the description displayed all the time?

    Thanks again for your help.
    bg.

  • #14
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    bornegraphics:

    I just sent you an email. I have a different email address for you to use.

    Just like the demo in one of my previous posts, the caption is displayed on mouseover the larger image.

    The larger image changes when a thumbnail is clicked.

    The caption array is built from the "alt" attribute of the thumbnails.

    I'll send you the .zip file in a few hours.

    I only finished the code a few days ago and want to test it a little more.

  • #15
    New Coder
    Join Date
    Aug 2011
    Location
    Ontario, Canada
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks a million!
    If you wish to email me directly or prefer that you can send any correspondence to bornegraphics@me.com.

    Again thanks a million for all your help. I will be sure to pass along my layout for you to view once I have completed it.

    Cheers,
    bg.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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