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.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2005
    Location
    Scottish Borders, UK
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Multiple slideshows with popup windows

    I'm putting together an online shop for a friend and am trying to implement 'slideshows' of a couple of images for each product, triggered by previous/next buttons, with each image capable of triggering a popup window containing a larger version of the image when clicked on.

    I've spent days trawling through scripts and can't find anything that fits the bill. I found what looks to be a good but huge script at www.barelyfitz.com but it's way over the top for my needs and too complex for my basic knowledge to work out what I need to add and take away. I found another nice short script that does exactly what I want except that I can't have more than one instance of it on a page. I managed to adapt scripts so that I've got a whole series of slideshows that trip through their images fine and trigger empty(!) popup windows. I've tried all sorts of things, but I can't work out what to add to the script to get the popup window to display the larger image.

    The script below is pared back to its basic building blocks minus any of my attempts to create the link to the larger image. Can anyone tell me what to add to get the larger images into the popup windows, or point me in the direction of a better script?

    HTML:
    Code:
    <div>
    <a href="javascript:popupWindow();"><img src="../images/img1_sm.jpg" alt="Click image to enlarge" name="products1" /></a>
    </div>
    
    <br />
    
    <div>
    <a onmouseover="changeimage('button1',selector2)" onclick="changeimage('products1',img1)" onmouseout="changeimage('button1',selector1)"><img src="../images/prev_off.gif" width="10" height="14" alt="image selector button" name="button1" border="0" /></a>
    <a onmouseover="changeimage('button2',selector4)" onclick="changeimage('products1',img2)" onmouseout="changeimage('button2',selector3)"><img src="../images/next_off.gif" width="10" height="14" alt="image selector button" name="button2" border="0" style="padding-left:10px" /></a>
    </div>
    Javascript (in separate .js file):
    Code:
    selector1 = new Image(10,14);
    selector1.src = "../images/prev_off.gif";
    selector2 = new Image(10,14);
    selector2.src = "../images/prev_on.gif";
    selector3 = new Image(10,14);
    selector3.src = "../images/next_off.gif";
    selector4 = new Image(10,14);
    selector4.src = "../images/next_on.gif";
    
    img1 = new Image(180,249);
    img1.src = "../images/img1_sm.jpg";
    img2 = new Image(150,280);
    img2.src = "../images/img2_sm.jpg";
    [etc]
    
    function changeimage (imgTagName,imgObj)
    {
      if (document.images)
        {
           document.images[imgTagName].src = imgObj.src
        }
    }
    
    function popupWindow(url) {
    window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=450,height=600,screenX=150,screenY=150,top=150,left=150')
    }

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Use this script (post #2) and then change the links to:
    Code:
    <div>
    <a href="../images/img1_big.jpg" onclick="popImg(this.href); return false;"><img src="../images/img1_sm.jpg" alt="Products 1 image" title="Click image to enlarge" name="products1" /></a>
    </a>
    </div>
    Change the large image src accordingly.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New Coder
    Join Date
    Mar 2005
    Location
    Scottish Borders, UK
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your help Glenn.

    Would I be right in thinking though that this will produce a popup window of the larger version of img1, but NOT img2 when that's swapped for img1? (I can't see any reference to a call to the url for img2's larger version.)

    What I was trying to do with the code above was find some way of specifying the url for the big version of the image and associating it with the imgTagName, eg. by adding a line like

    Code:
    img2.url = "../images/img2_lg.jpg";
    after the img2.src statement, and another statement to the changeimage function to create the association, which could then somehow find its way into the popup window code, but my knowledge of Javascript syntax is way inadequate. I don't know if that's possible? But what I need is some code that's going to produce a popup window for whichever img of each product pair has been selected to view.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Since you have a naming pattern for small and large images, then you can just replace "sm" with "lg" in the filename.
    Code:
    <div>
    <a href="#" onclick="popImg(this.getElementsByTagName('img')[0].src.replace('_sm.jpg', '_lg.jpg')); return false;"><img src="../images/img1_sm.jpg" alt="Products 1 image" title="Click image to enlarge" name="products1" /></a>
    </div>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    New Coder
    Join Date
    Mar 2005
    Location
    Scottish Borders, UK
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Aha!! Superb. Works a treat. Thank you so much Glenn! You're a real star.

  • #6
    New Coder
    Join Date
    Mar 2005
    Location
    Scottish Borders, UK
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    One more question, Glenn.

    Is it possible to add a line or two of code to pick up a title for the popup window from somewhere? Ideally it would be the product name.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Try this. Not tested though.
    Code:
    function popImg(imageURL, imgTitle) {
    	var imgWin = window.open('about:blank','imgWin','width=200, height=200, left=100, top=100');
    
    	with (imgWin.document) {
    		writeln('<html><head><title>Loading...</title>');
    		writeln('<style type="text/css"><!-- body { margin: 0px; } --></style></head>');
    		writeln('<body onload="self.focus();"><img id="pic" style="display:none" /></body></html>');
    		close();		
    	}
    	var img = new Image();
            img.onload = function() { sizeImgWin(imgWin, img, imgTitle) };
    	img.src = imageURL;
    }
    	
    function sizeImgWin(win, img, imgTitle) {
       	var new_w = img.width;
    	var new_h = img.height;
    	var old_w = win.innerWidth || win.document.body.offsetWidth;
    	var old_h = win.innerHeight || win.document.body.offsetHeight;
    	if (!new_w) { new_w = old_w; }
    	if (!new_h) { new_h = old_h; }
    	new_w -= old_w; new_h -= old_h;
    	win.resizeBy(new_w,new_h);
    	win.document.title = (imgTitle) ? imgTitle : img.src.substring(img.src.lastIndexOf("/")+1); //title defaults to image filename if title is not specified
    	var pic = win.document.getElementById('pic');
    	pic.src = img.src;
    	pic.style.display = 'block';
    }
    
    var imgs = [];
    imgs['products1'] = new Array();
    imgs['products1'][0] = {small:"../images/img1_sm.jpg", big:"../images/img1_lg.jpg", desc:"This is image 1."};
    imgs['products1'][1] = {small:"../images/img2_sm.jpg", big:"../images/img2_lg.jpg", desc:"This is image 2."};
    //...and so on
    
    function changeimage (imgTagName,imgIndex)
    {
      if (document.images)
      {
         var img = document.images[imgTagName];
         var imgObj = imgs[imgTagName][imgIndex];
         img.src = imgObj.small;
         //set onclick handler of the link
         img.parentNode.onclick = new Function('popImg("' + imgObj.big + '","' + imgObj.desc.replace(/\"/g, \\\") + '"); return false;');
      }
    }
    Code:
    <div>
    <a href="../images/img1_lg.jpg" onclick="popImg(imgs['products1'][0].big, imgs['products1'][0].desc); return false;"><img src="../images/img1_sm.jpg" alt="This is image 1." title="Click image to enlarge" name="products1" /></a>
    </div>
    
    <div>
    <a onmouseover="changeimage('button1',selector2)" onclick="changeimage('products1', 0)" onmouseout="changeimage('button1',selector1)"><img src="../images/prev_off.gif" width="10" height="14" alt="image selector button" name="button1" border="0" /></a>
    <a onmouseover="changeimage('button2',selector4)" onclick="changeimage('products1', 1)" onmouseout="changeimage('button2',selector3)"><img src="../images/next_off.gif" width="10" height="14" alt="image selector button" name="button2" border="0" style="padding-left:10px" /></a>
    </div>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    New Coder
    Join Date
    Mar 2005
    Location
    Scottish Borders, UK
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Glenn. I had a go with this but the popup windows stopped being popup windows. They opened as full windows. I guess I wasn't doing something quite right. However I found an earlier adjustment of this script you posted here which worked fine. Except in Safari, which resolutely insists the window is untitled.

    Is it possible to stop IE and Firefox from inserting the site URL before the title? It's frustrating because the URL takes up pretty much all the available space, pushing most of the title out of view.

  • #9
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by xanti View Post
    I'm putting together an online shop for a friend and am trying to implement 'slideshows' of a couple of images for each product, triggered by previous/next buttons, with each image capable of triggering a popup window containing a larger version of the image when clicked on.
    Does this come anywhere close to your specification? Link


  •  

    Posting Permissions

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