[Plugin: NextGEN Gallery] How can I display thumbs and big image in a div

hello, i need that clicking on the image in the big_image_container it opens even bigger in a lightbox/thickbox/shutter/whatever…

i tried like that, just adding the class="shutter" and it works only with the default image. if i click on another image the link opens the image in the browser normally.

function custom_effect(img, div, attr) {
	if(img != 'undefined' && div != 'undefined' && div != '') {
		var d = document.getElementById(div);
		var html = '<a class="shutter" href="' + img + '"';
		html += '>';
		html += '<img src="' + img + '"';
		html += ' /></a>';
		d.innerHTML = html;
	}
	return false;
}

you sure know what i have to do 🙂
please tell me!
thank you

I have been trying to get this to work for hours, but whenever I click a thumbnail, it just pops up in a new window. Any idea what I am doing wrong?

http://leointeriordesign.com/leo/showcase/showcase2/bow-mar/

Thanks Arafat, this almost solves what I’ve been trying to find a solution to for days.
What I need is the thumbs to show as they do, but when a thumb is clicked the grid of thumbs is replaced with the imagebrowser layout with next and back buttons to click through the images.
I don’t want any image overlays.
Using your layout I can get the large image to replace the thumbs in the div, what I need is the imagebrowser layout like this on the nextgen site…

http://nextgen-gallery.com/image-browser/

If anyone could help it would be great, I’ve posted in the forums a couple of times but had no reply’s.

thanks

Hi andymacb,
your right, thanks for that. I completely missed that option in the admin duh!
All I need to sort out now is a way back to the thumbs.

thanks for the reply!

Hi Andymacb,
I’ve been working on another site, back to the gallery one now.
If you could show me that code I’d really appreciate it.
I’m having another problem using the image viewer…I can’t seem to stop the image viewer sizing the images up too big when a thumb is clicked.
How have you sorted that on your photographer site?

thanks

Hi Stingraynut,

I was just doing it today so here is what I’ve done:

1) open file header.php

2) paste this code after closing </title> tag, in the next line

<script language="javascript" type="text/javascript">
/*
* Author Arafat Rahman (http://arafatbd.net)
*/
function custom_effect(img, div, attr) {
	if(img != 'undefined' && div != 'undefined' && div != '') {
		var d = document.getElementById(div);
		var html = '<span></span>' + '<img src="' + img + '"'; /* need span for IE hack to center image vertically */
		if(attr != 'undefined' && attr != '') {
			html += ' ' + attr;
		}
		html += '</div>' + '<div id="desc_container">' + '<span class="artTitle">' + default_img_title[img] + '</span><br />' + default_img_description[img] + '</div>';
		d.innerHTML = html;
	}
	return false;
}
</script>

you can really paste it anywhere in HEAD section of the document – what is IMPORTANT – the script has to definitely end before closing </head> tag.

3) open file called gallery.php – it should be located in:

wp-content>plugins>nextgen-gallery>view>gallery.php

4) now, find this line and code:

<!-- Thumbnails -->
	<?php foreach ($images as $image) : ?>

	<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $gallery->imagewidth ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
			</a>
		</div>
	</div>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
<!--	<br style="clear: both" /> -->
	<?php } ?>
 	<?php endforeach; ?>

	<!-- Pagination -->
 	<?php echo $pagination ?>

</div>

<?php endif; ?>

and replace it with:

<!-- Default Image -->

<script language="javascript">
var default_img = new Array();
var default_img_description = new Object();
var default_img_title = new Object();
</script>
<?php $i = 0;?>
<?php foreach ($images as $image) : ?>

<!-- Thumbnails -->

<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $gallery->imagewidth ?> >
<div class="ngg-gallery-thumbnail" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> style="text-decoration:none;" >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> ></a>
<!-- loop for thumbnails -->
<script language="javascript">
default_img[<?=$i?>] = '<?php echo $image->imageURL ?>';
default_img_title[default_img[<?=$i?>]] = '<?php echo $image->alttext ?>';
default_img_description[default_img[<?=$i?>]] = '<?php echo htmlspecialchars_decode($image->description) ?>';
</script>
</div>
</div>

<?php $i++; ?>    

<?php endforeach; ?>

<div id="big_image_container"></div>
<script language="javascript"> custom_effect(default_img[0], "big_image_container", ""); </script>

<!-- Pagination -->
<?php echo $pagination ?>

</div>

<?php endif; ?>

5) Now, login to your WordPress and on the menu – left hand side – below Settings you should see Gallery, go to Options, and from top menu chose Effects;

6) JavaScript Thumbnail Effect: chose > Custom

7) Link code line: paste this code > class=”highslide” onclick=”return custom_effect(this, ‘big_image_container’, ”)”

8) Make sure you click on “Save Changes”

9) From top menu chose: Gallery, and make sure that option “Show ImageBrowser” is NOT selected!!!

10) it should all work now! If you want to make some changes to the BIG image that is displayed below thumbnails you should edit your CSS file, for example:

#big_image_container img {
border:1px solid #A9A9A9;
margin: 10px;
padding:5px;
height:350px;
max-width:500px;
/* display:block !important; */
}

Hope it all works for you, and you will be able to fix your gallery!

Ro

Help!!!

I’ve gotten a Gallery to display properly here:
http://www.lovejoydesigns.net/portfolio/waban/
BUT, only the first thumbnail (the one for the big image loaded into the container) seems to function. One can’t navigate the second image.

Do javascript errors affect links? I am trying to create links to the individual portfolio pages (waban, beacon hill and wayland) from the main portfolio page and even though the correct URL is hand-coded into the table in the middle of http://lovejoydesigns.net/portfolio, the links aren’t working.

Thanks for all the help found here. Everyone gets a HUGE credit on my site when this is figured out!

Hey! The images are working now. THANKS!
I have quite a few nested divs in the page so that’s exactly what the issue was.
I’m also having that Undefined thing show up where the description goes so I’ll work on that as well.

Thank you!!