[SOLVED] Fancy pop-up image pages

[notrav]

Hello,

 

I have seen a few web pages that allow you to view the full-res version of an image upon clicking the thumbnail picture, and from there navigate to other full-res images... i.e. on the website http://www.slashgear.com/msi-wind-top-ae1900-touchscreen-nettop-official-3139556/ there are 4 thumbnails midway through that support this feature.

 

I am assuming that, to do this, there is a pop-up page containing the image's full-res picture centered in it that auto-generates navigation links to the same pop-up page but with a different image centered/links changed. However, I'm really not sure. More over, I don't even know what to call this feature, so I cannot explore tutorials lurking around google searches.

 

I believe that there is a .php function on that page (http://www.slashgear.com/msi-wind-top-ae1900-touchscreen-nettop-official-3139556/) that is included in the head that somehow detects when one of those images (thumbnails) are clicked (they are marked as <dd> etc descriptors), and then generates code, but I really have no clue as to what exactly is happening and the major things I am probably missing. Could anyone possibly explain or direct me to code for this?

 

Thank you.

 

[notrav]

For reference, the html source code for the thumbnails on that page is:

 

<!-- see gallery_shortcode() in wp-includes/media.php -->

    <div class='gallery'>

    <dl class='gallery-item'>

        <dt class='gallery-icon'>

        <a href='http://www.slashgear.com/wp-content/uploads/2009/03/msi_wind_top_ae1900_1.jpg' title='msi_wind_top_ae1900_1'>

<img src="http://www.slashgear.com/wp-content/uploads/2009/03/msi_wind_top_ae1900_1-150x100.jpg" width="150" height="100" class="attachment-thumbnail" alt="msi wind top ae1900 1 150x100"  title="MSI Wind Top AE1900 touchscreen nettop official" />

</a>

        </dt>

    </dl>

 

(and then three more times)

 

    <dl class='gallery-item'>

    <dt class='gallery-icon'>

        <a href='http://www.slashgear.com/wp-content/uploads/2009/03/msi_wind_top_ae1900_specs.jpg' title='msi_wind_top_ae1900_specs'>

        <img src="http://www.slashgear.com/wp-content/uploads/2009/03/msi_wind_top_ae1900_specs-150x100.jpg" width="150" height="100" class="attachment-thumbnail" alt="msi wind top ae1900 specs 150x100"  title="MSI Wind Top AE1900 touchscreen nettop official" />

        </a>

    </dt>

    </dl>

 

<br style='clear: both;' />

</div>

 

[RichardRotterdam]

that website uses lightbox for jquery. Try looking tha tup

[notrav]

Thank you! That is exactly what it was. I will use this plug-in for now then and develop something else after I finish the rest of my site.