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. jennsweb
    Member
    Posted 4 years ago #

    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!!

  2. jennsweb
    Member
    Posted 4 years ago #

    One more question:
    When I am editing the NGG template, gallery.php, do I need to put JS in the div for the description?

    <?php $i++; ?>    
    
    <?php endforeach; ?>
    
    <div id="big_image_container"></div>
    <script language="javascript"> custom_effect(default_img[0], "big_image_container", ""); </script>
    </div>
    <div id="desc_container"></div>
    <!-- Pagination -->
    <?php echo $pagination ?>
    
    <?php endif; ?>
  3. jennsweb
    Member
    Posted 4 years ago #

    Almost there!

    http://lovejoydesigns.net/featured-products

    Having that same UNDEFINED issue on the home page, but once the thumbnails are clicked, things work. There are some weird dots above the thumbnails in FF and methinks it may be a hidden div issue again.

    Thanks to all for the help found here! I can't believe how little (real and useful) info there is out there on how to customize the gallery!

  4. jennsweb
    Member
    Posted 4 years ago #

    I realized that in all the posts back and forth, the solution I had been looking for was divided up between different sets of code. Here's what I'm using for each step. You can see things properly in action here:

    http://testblog4.jennmearswebdesign.com/portfolio/wayland/

    (Note: Wayland is a child page of Portfolio)

    Things aren't quite working right on this page. (I also tested by inserting the gallery in a child page, but no dice.)

    http://testblog4.jennmearswebdesign.com/featured-products/

    The page loads with the word "Undefined" where the first image should be. Both Galleries' images also use description text for the images.

    Here's the code I'm using:

    Javascript for Header

    Pasted in between </title> and stylesheet link

    <script language="javascript" type="text/javascript">
    /*
    * Author Arafat Rahman (http://arafatbd.net)ANDlok1728ammended
    */
    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;
    }
    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;
    }
    
    </script>

    Call to Javascript in Footer
    inserted just before </body>

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

    Link Code for Custom Effect

    class="highslide" onclick="return custom_effect(this, 'big_image_container', ''), desc_effect(this, 'desc_container', '');"

    Here's the Gallery Template HTML . It's from the Default Image edit to the end of the code
    (NOTE: I needed to get the Thumbnails to display on the right and after a lot of trial and error, mostly the latter, I realized that if I close the div for the Gallery Overview just after the Thumbnails-related divs, I can force the width of the thumbnails "container" to 300px, floated right)

    <!-- 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>
    </div>
    </div>
    
    <?php $i++; ?>    
    
    <?php endforeach; ?>
    </div>
    <div id="big_image_container"></div>
    <script language="javascript"> custom_effect(default_img[0], "big_image_container", ""); </script>
    <div id="desc_container"></div>
    <!-- Pagination -->
    <?php echo $pagination ?>
    
    </div>
    
    <?php endif; ?>

    And, last but not least,
    Here's the Gallery specific CSS from the Default stylesheet for NGG

    /* ----------- Gallery style -------------*/
    
    .ngg-galleryoverview {
    	overflow: hidden;
    	margin-top: 0px;
    	width: 300px;
    height:400px;
    	clear:both;
    	display:block !important;
    float:right;
    background-color:#fff;
    }
    
    .ngg-galleryoverview .desc {
    /* required for description */
       margin:0px 10px 10px 0px;
       padding:5px;
    
    }
    
    .artTitle {
    color:#fff;
    }
    
    .ngg-gallery-thumbnail-box {
    	float: left;
    
    }
    
    .ngg-gallery-thumbnail {
    	float: left;
    	margin-right: 5px;
    	text-align: center;
    color:#fff;
    }
    
    .ngg-gallery-thumbnail img {
    	background-color:#FFFFFF;
    	border:1px solid #A9A9A9;
    	display:block;
    	margin:0px 0px 4px 5px;
    	padding:4px;
    	position:relative;
    
    }
    
    .ngg-gallery-thumbnail img:hover {
    	background-color: #A9A9A9;
    } 
    
    .ngg-gallery-thumbnail span {
    	/* Images description */
    	font-size:90%;
    	padding-left:5px;
    	display:block;
    
    }
    
    .ngg-clear {
    	clear: both;
    }
    
    #big_image_container {
    float:left;
    width:400px;
    }
    
    #desc_container {
    float:left;
    width:400px;
    font-size:12px;
    color:#7D8FA0;
    }

    This is what's working for me on at least one gallery. If anyone can help me figure out why the featured-products page isn't doing the same thing as the Portfolio page, I'd really be grateful!

  5. lok1728
    Member
    Posted 4 years ago #

    Hey Jennsweb,

    There are a couple items that I see right off.
    In your link code for custom effect, you should only have this:
    class="highslide" onclick="return custom_effect(this, 'big_image_container', '')"

    In you header javascript, you only need this code:

    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>

    The function desc_effect (desc, div) code appears to be one of my earlier attempts to get the description and titles to show up but it didn't work very well - hence the "UNDEFINED" text on the first image. So, if you look at ARPE's full list of code and instructions, that's pretty much the steps.
    I hope this helps. It's the first thing I came across looking at your code and site.

  6. jennsweb
    Member
    Posted 4 years ago #

    Hi Lok1728

    Thanks for straightening that out! I installed the code and the galleries are working. But...

    I had to delete the gallery that was on the featured products page and re-create it under a different name. It worked great when I had one word in the description but when I added the entire text (which the client needs to describe the product and list the price), I got the Undefined error again. It seems like this method only works when there is one line in the description? (working perfectly in the Portfolio Galleries which have 1 or 2 words in description)

    Thanks for all your help!

  7. lok1728
    Member
    Posted 4 years ago #

    Hey Jennsweb,
    Okay, the only thing I can figure is that in the gallery alt and descriptions, if you have any hard breaks/returns, that undefined error appears. That's been my experience. The way I get around that is placing "< br >" tags within the areas that I need a break in the text.

    I know somewhere there's code to catch hard-returns in a value and convert them for output but I haven't figured out how to do it yet. So for now, I have to tell my client(s) to put in the tag if they wish for multiple lines of text.

    So, you're most welcome and see if the above tag eliminates the undefined error?

  8. Stingraynut
    Member
    Posted 4 years ago #

    @arpe Thankyou Thankyou Thankyou - your instructions were crystal clear- showing the path to the gallery was extremely useful, as was it all- I followed all your instructions and PRESTO!!! all is working I can't thank you enough - and thanks of course to Arafat who began this thread.

    @jennsweb - looks like you have answered my next question about moving the thumbnails to the side, thankyou very much for posting your CSS and PHP code

    You've said it for me -
    Thanks to all for the help found here! I can't believe how little (real and useful) info there is out there on how to customize the gallery!

  9. Stingraynut
    Member
    Posted 4 years ago #

    @jennsweb I've copied your css and gellery PHP and have the thumbnails on the right as I wanted - thank you

    I have those strange blue dotted lines too- haven't found out whats causing them yet, but they go near the option to 'View with piclens' which I haven't removed. There are 5 blue dots and 3 groups of them- I have 3 test images hmmm.You have 5 groups and 5 thumbs. The second and 3rd groups underline when hovered over - as do yours. I think they are for the alt text Title.

    I got the 'undefined' error when I renamed the Alt & Title text which then renamed the filename so the picture couldn't be accessed.

    midday Friday 20th Nov current test is at- http://cyclonekit.com/test/?page_id=2 it's just a test website, not the eventual one I will use this on.

  10. Stingraynut
    Member
    Posted 4 years ago #

    I found the dotted lines- line 80 of Gallery.php there are 5 full stops - removed them and dots have gone!

    they are the last entry under the heading <!-- Default Image -->

    and immediately before
    <!-- thumbs -->

  11. Stingraynut
    Member
    Posted 4 years ago #

    I have two problems -

    I have a test of 23 thumbnails- I'd like to enclose then in a container with overflow:scroll; but I can't make or find any container that will contain the thumbs generated by the JS

    the other problem is not related to this thread, not sure if I should start a new thread? but will mention it here in case it's obvious -

    when uploading images to the gallery, they are not controlled by the maximum size set under options and come out at original larger size

  12. jennsweb
    Member
    Posted 4 years ago #

    Hi Stingray,

    The image size issue was one of the first ones I had with NGG. I had to set the width the Overview div to 300px and the big_img_container to 400px and float them to the right and left respectively.

    In other news, the
    tag works in the descriptions and now the galleries are all functioning. The only remaining issue is that the first image in the thumbnails gallery on the right is not aligned horizontally with the 2nd column in Safari.
    http://www.lovejoydesigns.net/featured-products/

    Any ideas out there?

  13. lok1728
    Member
    Posted 4 years ago #

    Hey Stingray,

    Here's my thoughts on a thumbnail container: I made a DIV to put these in (here's an example css)

    #gallerythumbs {
    overflow: auto;
    	margin: 0px 0px 0px 0px;
    	/*padding: 0px 10px 0px 0px; */
    	width: 160px;
    	height: 470px;
    	position: absolute; top: 0% /* for explorer only */
    }

    If you view the source of this page : gallery
    you'll be able to see where I placed the DIV. Mind you, I'm not using the overflow scroll but I do have the thumbnail div in place.

    Also, I made my own gallery.php template so I'm not using the default, this way any changes made are not upset with any nextgen gallery updates.

  14. jennsweb
    Member
    Posted 4 years ago #

    Hi it's me again--

    MUCHOS GRACIAS STINGRAY!

    I took those 5 dots out of the code directly underneath:

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

    and now the gallery seems to be displaying perfectly in Safari. That first image is no longer "jumping" out of alignment with the next column.

  15. dragonsjaw
    Member
    Posted 4 years ago #

    I have been looking for something like this for quite awhile, opening thumb into a larger div on same page.

    I am wondering if any one has used the code/s above and then dropped the
    http://wordpress.org/extend/plugins/shadowbox-js/
    Shadowbox plugin in to use on the larger image to open the largest image in shadowbox?

    thumb---> to medium size in div ---> to click on that and shadowbox opens full size (controlled by browser sizing) ??

    Any idea on how to implement that?

    thanks

Topic Closed

This topic has been closed to new replies.

About this Topic