Thumbnail Coding

oracle · 11-21-2007, 12:11 PM

Hello, I need help with creating an image gallery....I want the thumbnails to open in a pop-up window....how will i do it? I've only come up with the image opening in a new window when clicked...

Diddy1 · 11-21-2007, 12:50 PM

I don't know if you want a script or actual specific coding but here's a list of scripts you can use: hotscripts.

Thank You

Costin Trifan · 11-22-2007, 06:06 AM

pop-up window:

Quote:

"windowTitle" -> set a title to the window (do not insert spaces)(this argument is optional)
"some_features" -> window features, like width, height and so on (this argument is optional)

hope this helps.

oracle · 11-22-2007, 12:12 PM

Thanks Costin....

Now, my question is how do I insert that to this...

Quote:

sorry to be a pest but I'm really new at this...

Costin Trifan · 11-23-2007, 06:18 AM

Code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    
    <style type="text/css">
        img { border: none 0; cursor: pointer; }
    </style>
    
    <script type="text/javascript">

function createImagePreview(imageID, windowName, windowFeatures)
{
    var imageSrc = document.getElementById(imageID).getAttribute('src');
    windowName = windowName || 'title';
    
    var thisImage = document.getElementById(imageID),
        _width  = thisImage.style.width,
        _height = thisImage.style.height;

    var features = "width="+_width+", height="+_height;

    windowFeatures = features || null;

    var popup = window.open(imageSrc, windowName, windowFeatures);
    popup.focus();
}


function preventNavigation()
{
    var markedLinks = document.getElementsByTagName("a");
    for ( var i in markedLinks)
    {
        if (markedLinks[i].className == "nav")
        {
            markedLinks[i].removeAttribute("href");
        }
    }
}
window.onload = preventNavigation;

    </script>
</head>
<body>
<a class="nav" href="test1.gif" onclick="javascript:createImagePreview('T1');"><img id="T1" alt="" src="test1.gif" style="width: 70px; height: 70px;" /></a><br /><br />
<a class="nav" href="test2.gif" onclick="javascript:createImagePreview('T2');"><img id="T2" alt="" src="test2.gif" style="width: 50px; height: 60px;" /></a><br /><br />
<a class="nav" href="test3.gif" onclick="javascript:createImagePreview('T3');"><img id="T3" alt="" src="test3.gif" style="width: 45px; height: 52px;" /></a><br /><br />
</body>
</html>

Now you have two functions:
- createImagePreview
- preventNavigation

The first one will create the popup window and the second one is used to prevent navigation away from the currently viewed page if someone will click one of your images (that is for those users that have javascript enabled).

However, the second function will be called only when the user will click the links that have the class "nav".

hope this helps