WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Plugin: NextGEN Gallery] How can I display thumbs and big image in a div (45 posts)

  1. Arafat Rahman
    Member
    Posted 5 years ago #

    I like to display thumbs images in list order, and when clicks on thumbs the big image will display in a div within the page, not in pop up div.
    How to do this? any idea?

  2. Arafat Rahman
    Member
    Posted 5 years ago #

    I made a solution for this. Let me share the solution here. Please take a look into this page -
    http://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 (http://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

  3. geraldmorales
    Member
    Posted 5 years ago #

    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

  4. geraldmorales
    Member
    Posted 5 years ago #

    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:http://www.ordivisio.com/phototheque
    Gérald

  5. geraldmorales
    Member
    Posted 5 years ago #

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

  6. geraldmorales
    Member
    Posted 5 years ago #

    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.

  7. geraldmorales
    Member
    Posted 5 years ago #

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

  8. Arafat Rahman
    Member
    Posted 5 years ago #

    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

  9. geraldmorales
    Member
    Posted 5 years ago #

    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

  10. rosebean
    Member
    Posted 5 years ago #

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

  11. rosebean
    Member
    Posted 5 years ago #

    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!

  12. rosebean
    Member
    Posted 5 years ago #

    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 (http://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;
    }
  13. lok1728
    Member
    Posted 5 years ago #

    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.

  14. lok1728
    Member
    Posted 5 years ago #

    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!

  15. Amanda Hawkins
    Member
    Posted 4 years ago #

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

  16. colosimo
    Member
    Posted 4 years ago #

    any news about the "Undefined" description issue?

  17. colosimo
    Member
    Posted 4 years ago #

    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

  18. lok1728
    Member
    Posted 4 years ago #

    Colosimo,
    I did resolve the "undefined" description problem. Below is the code I've used and to see it in
    action.
    You will have to define in your CSS the #desc_container and the .artTitle
    I will be recoding the site but you can get the jist of what is going on. I have yet to delve into making the big image container click-link, so I cannot help you there.

    custom_effect.js

    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;
    }

    gallery template file:

    <!-- 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) : ?>
    .....
    <!-- thumbs -->
    <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 ?> />
    <!-- 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>
  19. mandawahoo
    Member
    Posted 4 years ago #

    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/

  20. lok1728
    Member
    Posted 4 years ago #

    manda,
    It appears you might be missing the Step 5 of calling the function for the first time. I wasn't able to find it viewing your source:

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

    Place that before the </body>

    see if that helps?

  21. freaq
    Member
    Posted 4 years ago #

    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

  22. Andy Macaulay-Brook
    Member
    Posted 4 years ago #

    Freaq - what you describe sounds like standard behaviour for NGG if I've understood you correctly.

    In the NGG Options page in Admin just go to the Gallery tab and check the checkbox for the Show ImageBrowser option. Then when you click on a thumbnail in a gallery you will be taken to the image browser view for that image.

  23. freaq
    Member
    Posted 4 years ago #

    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!

  24. Andy Macaulay-Brook
    Member
    Posted 4 years ago #

    Hi freaq - I've also coded a way to link back to thumbs - see Dan Pix Photography.

    I'm half asleep with a cold at the minute - I'll try and post back my code within a couple of days.

    The essence of the solution is to put the gallery template into your theme files, and recode the links to images to include a parameter indicating the gallery's ID & page number so that you go back to the right page.

    A.

  25. freaq
    Member
    Posted 4 years ago #

    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

  26. Stingraynut
    Member
    Posted 4 years ago #

    Hi arafat & lok1728 both your sites are brilliant- this is exactly what I want to do.

    I am hazy on PHP and JS, I often manage to copy or change them succesfully, but my attempt to copy the instructions failed.

    Please could someone help me with these basic questions?

    Step Two - where in header.php do I put that code?

    Step Four - You say 'edit' - do I replace the thumbnail code there with the code in your instructions? or ADD the code (before/after)?

    Step Five - call the function - is this pasted into same file as step 4?

    I'm sorry to reward brilliant programminging with dumb questions, but I really want to have thumbnails AND display image

  27. arpe
    Member
    Posted 4 years ago #

    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

  28. arpe
    Member
    Posted 4 years ago #

    All credit to Arafat and lok1728 !!!

    Many thanks for sharing your gallery fix!

  29. jennsweb
    Member
    Posted 4 years ago #

    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!

  30. lok1728
    Member
    Posted 4 years ago #

    Jennsweb,
    Hi. I checked your site, and it appears the DIV #contentpages is covering the DIV of your thumbnail(s). Check your DIV locations. That 2nd thumbnail is showing as a link, we just can't select it because it's under that DIV.

    I think that what the problem may be?

    \oh and thanks arpe for posting a clearer set of code and instructions than I had!

Topic Closed

This topic has been closed to new replies.

About this Topic