click on image, zoom out another image

**vijayrajesh98** · 10-13-2008, 07:09 AM

Hello All,
I was looking at this app and was trying to do something similar.
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

When you click the thumbnail, I would like to display a div/css generated image, as against a jpeg that is shown here. That is when I click on the thumbnail, the image that zooms out should not be a jpeg, but another image of a just a number per se that I define through div class.

Any help would be deeply appreciated.

**Jesdisciple** · 10-14-2008, 02:29 AM

Code:

another image of a just a number per se

Please rephrase. I don't understand the difference between the linked script and what you want. If you don't want to use a JPG, link to a GIF or an SVG instead.

**vijayrajesh98** · 10-16-2008, 06:05 AM

Hello Thank you very much!!!
What I am trying to do is display - images that are dynamically generated using css. By images I mean a simple red rectangular block with a number written on it - you can see it as a card with a number written on it. But this number that is displayed is random, and could just be any from 1-100 and thats why I use css to generate the image, rather than creating 100 jpg/gif images.

Now in the above linked - http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm when I click on the woman, what pops out is her image that is bigger. So both the thumbnail and the main image are same jpg images. But I would like to modify the latter, where I click on a thumbnail(which is a jpg) and when it pops out, instead of showing a jpg/gif, show the image/box I generate from above. That is, in my case I would like the card that I am generating above to be displayed.

Any help would be deeply appreciated.

**Jesdisciple** · 10-16-2008, 08:38 PM

Do you have the CSS taken care of? I assume that you use the "card" class to hook the CSS to the elements. You could move the "visibility: hidden" to that class from the inline style.

There's probably a more graceful solution available, but this is what popped into my head.

Change the loadimage function from DD to this:

Code:

    loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"
        if (this.thumbBox.style.visibility == "visible") //if thumbox is visible on the page already
            this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox
        this.featureImage = link.lastChild.cloneNode(true);
        this.featureImage.style.visibility = "visible";
        this.centerDiv(this.thumbLoading); //Center and display "loading" div while we set up the image to be shown
        while(this.thumbImage.hasChildNodes()){
            this.thumbImage.removeChild(this.thumbImage.lastChild);
        }
        this.thumbImage.appendChild(this.featureImage); //Populate thumbImage div with image (while still hidden)
        thumbnailviewer.showthumbBox();
        return false;
    },

Here's a demo:

HTML Code:

<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />
        
        <script src="thumbnailviewer.js" type="text/javascript">
        
        /***********************************************
        * Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com)
        * This notice must stay intact for legal use.
        * Visit http://www.dynamicdrive.com/ for full source code
        ***********************************************/
        
        </script>
    </head>
    <body>
        <p><a href="" rel="thumbnail"><img src="thumbnail.gif" style="width: 50px; height: 50px" /><span style="visibility: hidden;" class="card">Blah!</span></a></p>
    </body>
</html>

**vijayrajesh98** · 10-25-2008, 02:21 PM

Hello ... Thank you very much again. I just saw that a reply was posted. This looks great. Since I am not an expert in javascript, I have one quick question though, here you have the "card" class as the css element. How do I change it so that this card is generated from a function? I have the function say display() that generates the css, but I would like the output of that, rather than the card css itself, to be displayed on the popup.

In other words how should I change this so that the class comes from a function rather than a card css.

<a href="" rel="thumbnail"><img src="thumbnail.gif" style="width: 50px; height: 50px" />Blah!

I would deeply appreciate once again.

**Jesdisciple** · 10-25-2008, 04:29 PM

So you want the span to be dynamically generated?

Code:

//If display() returns the element...
link.appendChild(display());

or

Code:

function display(){
    //Find the link or pass it into the function.
    link.appendChild(span);
}

**vijayrajesh98** · 10-26-2008, 07:39 PM

Thank you very much again ... Actually my function returns the link. So display() method that I have, that generates, will be something like

display()
{
cardNode = document.createElement("DIV");
cardNode.className = "card";
spotNode = document.createElement("DIV");
spotNode.className = "index";
cardNode.appendChild(spotnode);
return cardNode;
}

so can you tell me how do I change
<a href="" rel="thumbnail"><img src="thumbnail.gif" style="width: 50px; height: 50px" />Blah!

so that I could call display() method in it. Then I am hoping that display() will show the output from the function above in the popout from the thumbnailviewer. I think that should do the trick.

Thanks once again.

**Jesdisciple** · 10-27-2008, 03:00 AM

I think one of us is confused... display() returns the thumbnail, right? Then you need to grab that return value, call appendChild() on it, and pass the span in. Changing the HTML to call display() is a backward solution to the problem as I understand it; DOM modifications are functions called to change HTML.

**vijayrajesh98** · 10-28-2008, 03:27 PM

Thank you profusely for that. I think I see exactly what you are saying now. So once I pass the span as you have said, something like the last two statements here

display()
{
cardNode = document.createElement("DIV");
cardNode.className = "card";
spotNode = document.createElement("DIV");
spotNode.className = "index";
cardNode.appendChild(spotnode);
link.appendChild(span)
return cardNode;
}

Once I have it, I can use onclick in this statement so that display() gets triggered?

<a href="" rel="thumbnail"><img src="thumbnail.gif" style="width: 50px; height: 50px" />Blah!

**Jesdisciple** · 10-28-2008, 05:34 PM

Yes, and the way to do that is also via JS. (I don't think the onclick attribute actually gets added to the HTML source, but the behavior is added to the page element.) But note that you still need to

Tell JS what both link and span are.
Append link to either cardNode or spotNode, or the first will be forgotten.

Code:

display()
{
    cardNode = document.createElement("DIV");
    cardNode.className = "card";
    spotNode = document.createElement("DIV");
    spotNode.className = "index";
    cardNode.appendChild(spotnode);
    link.appendChild(span)
    link.onclick = function()
    {
        thumbnailviewer.loadimage(link);
    };
    return cardNode;
}

P.S. Aren't [CODE][/CODE] tags great?

Thread: click on image, zoom out another image

Thread Tools

Search Thread

click on image, zoom out another image

Bookmarks

Bookmarks

Posting Permissions