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

I made a solution for this. Let me share the solution here. Please take a look into this page –
https://theserendipitymagazine.com/?page_id=97

Step One:
I made wordpress template in my current theme, in that template I put a HTML div like bellow.
<div id="big_image_container"></div>

Step Two:
Make a javascript function and load the function into the header.php function loads the image into the div.

/*
* Author Arafat Rahman (https://arafatbd.net)
*/
function custom_effect(img, div, attr) {
	if(img != 'undefined' && div != 'undefined' && div != '') {
		var d = document.getElementById(div);
		var html = '<img src="' + img + '"';
		if(attr != 'undefined' && attr != '') {
			html += ' ' + attr;
		}
		html += ' />';
		d.innerHTML = html;
	}
	return false;
}

Step Three:
Call the JS function in NextGen Gallery configuration. NextGen Gallery >> Option >> Effects
JavaScript Thumbnail effect: custom
Link Code line :
class="highslide" onclick="return custom_effect(this, 'big_image_container', '')"

Step Four:
Load the first image in the blank DIV, I need to edit the gallery.php located into the NextGen Gallery plugin directory/view/

<!-- Thumbnails -->
<script language="javascript">
	var default_img = new Array();
</script>
<?php $i = 0;?>
......
loop for thumbnais
<script language="javascript">
	default_img[<?=$i?>] = '<?php echo $image->imageURL ?>';
</script>
<?php $i++; ?>
.... loop ends here

Step Five:
Call the function for first time
where body content ends

<script language="javascript">
	custom_effect(default_img[0], "big_image_container", ""); // show default image
</script>

That’s all

I needed the solution urgent that’s why I made in simple way, did not care to wordpress structure LOL

Arafat,
Brilliant ! but I need some little help. Where should the “Step two” go? I tryed to put the function into the header of my current WP theme (K2) and I get an error.
Sorry, I am not very good with JS/PHP.
Gérald

Arafat,
I have properly integrated all the code with success – but there is no effect… deleted the cache from my browser, nothing happened. strange. You can see my page here:https://www.ordivisio.com/phototheque
Gérald

one precision: my tag is : [nggallery id=1 template=custom_effect]
The template file name being k2/nggallery/custom_effect.php

It vworks ! only my JS did not have the same name than on I put on the call – no need help any more. It’s great ! I spent all week-end looking for this, thank you very much Arafat.

Last question: if ever you find a way to add caption under the big image, that would be cool.

You are most welcome geraldmorales.

You may create another JS array like the array for the image, and put the string bellow the big image.

Thanks

I’m not good enough in programming to do that arrrrggg… I looked for a solution, but am lost. If ever you add this to your site, can you let me know how-to do this?
Thanks

Can someone help me with the instructions above? I’ve been working on a test page at https://www.margotconnery.com/ian/6/?album=2&gallery=1 and I can’t get the darn thing working.

I ended up getting the large image to display under the thumbnails but I still can’t figure out how to display the description. I’m really not a coder so I’m having some difficulties understanding the steps in order to complete this. Any help would be greatly appreciated!

Still boggled by this…. I guess my only question is how do I set up a JS array for the title/description like he did with the image here:

/*
* Author Arafat Rahman (https://arafatbd.net)
*/
function custom_effect(img, div, attr) {
	if(img != 'undefined' && div != 'undefined' && div != '') {
		var d = document.getElementById(div);
		var html = '<img src="' + img + '"';
		if(attr != 'undefined' && attr != '') {
			html += ' ' + attr;
		}
		html += ' />';
		d.innerHTML = html;
	}
	return false;
}

Thanks Arafat for the great image & thumbnail code above.
I have been racking my brains with trial & error for the last week to understand how to get the image description into another DIV.

Here’s what I have come up with so far and I am able to get the default description into the DIV, however, upon the ONCLICK I cannot get the description to change. If anyone can take a look and see what I am missing or have done wrong I would appreciate it. Very unlearned with JS so any explanation will help. Thanks!

for the custom_effect.js file I added this:

function desc_effect (desc, div, attr) {
	if(desc != 'undefined' && div != 'undefined' && div != '') {
		var t = document.getElementById(div);
		var html = '' + desc + '';
		/*if (attr != 'undefined' && attr != '') {
			html += ' ' + attr;
		}
		html += ' />'; */
		t.innerHTML = html;
	}
	return false;
}

In the gallery.php file I updated Arafat’s code with this:

<!-- Default Image -->
	<script language="javascript">
		var default_img = new Array();
		var default_desc = new Array();
	</script>
	<?php $i = 0;?>
		<script language="javascript">
			default_img[<?=$i?>] = '<?php echo $image->imageURL ?>';
			default_desc[<?=$i?>] = '<?php echo $image->description ?>';
		</script>
	<?php $i++; ?>

and finally here’s the Link Code Line from NGG Options – Effects:
class="highslide" onclick="return custom_effect(this, 'big_image_container', ''); return desc_effect(this, 'desc_container', '');"

As well, I did add the DIV into my HTML:

<div id="desc_container"></div>

Thanks for any help.

Okay!
I finally am able to get the image caption/title to display! (I still have one slight problem which I will address after the code):

I fixed the javascript file (custom_effect.js) to this:

function desc_effect (desc, div) {
	if(desc != 'undefined' && div != 'undefined' && div != '') {
		var t = document.getElementById(div).innerHTML = desc.title;
		var html = '' + desc + '';
		t.innerHTML = html;
	}
	return false;
}

Also, I had to update the Link Code Line in the NGG Options Effects (I had incorrectly coded the two events.)
class="highslide" onclick="return custom_effect(this, 'big_image_container', ''), desc_effect(this, 'desc_container', '');"

I also updated my code in the gallery.php file:

<!-- Default Image -->
	<script language="javascript">
		var default_img = new Array();
		var default_desc = new Array();
	</script>
	<?php $i = 0;?>
		<script language="javascript">
			default_img[<?=$i?>] = '<?php echo $image->imageURL ?>';
			default_desc[<?=$i?>] = '<?php echo $image->caption ?>';
		</script>
	<?php $i++; ?>

Now for the slight problem I am having and all it probably takes is an IF/THEN statement in the JS code to fix: Upon first loading the gallery my description says “Undefined” but upon clicking any thumbnail the DIV will display the correct image caption.

I hope this helps some that were wanting to add the image caption. If anyone can fix the undefined problem I’ll gladly accept the help!

Arafat!
Amazing, thank you so much for sharing this! Worked perfectly. ??

any news about the “Undefined” description issue?