Question

I have a simple jquery cycle gallery populated by PHP. I would like to add an
“onclick” event corresponding to each image, revealing a higher resolution jpeg.
I would like to just put some inline javascript like so:

print('<div class="bigimg"><img onclick="javascrpt:load wrapper2 with (\''.$lrg_images.$file.'\')" src="' .  $cycle_images . $file . '" class="change" align="right"></div>'."\r\n");

…so each enlarged image is bound to it’s cycle gallery counterpart.
Here is the meat of what I have so far.

 //directory containing large images
$lrg_images = './images/images_lrg/';
//directory containing medium images
$cycle_images = './images/images_med/';

function getPictures() {
    while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
        if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
            print('<div class="bigimg"><img src="' .  $cycle_images . $file . '" class="change" align="right"></div>'."\r\n");
        }
    }
<!-- container for cycle gallery -->
<div id="feature_gallery"><?php getPictures(); ?></div>

<!-- container for enlarged image -->
<div id="wrapper2"></div>

Thanks and let me know if you need anything clarified.

Answer 1

The jQuery Facebox plugin will be helpful to you.

You can have it bind to your elements so that when they are clicked, it opens. There are examples of this on the homepage.