Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Thumbnail Viewer Script - pops up behind navigation menu

  1. #1
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Thumbnail Viewer Script - pops up behind navigation menu

    1) Script Title: Thumbnail Viewer Script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

    3) Describe problem: Images open up behind navigation menu. Is the a way to have them show on top?

    Page view at http://www.abetterquilt.com/portfoli...mer-quilts.htm

    Also,

    Is there a way to add images automatically? All images are renamed with integer + 1 as seen on source page of above.

    Thank you in advance

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    In the thumbnailviewer.css change #thumbBox { z-index:10; } to #thumbBox { z-index:9999; }

    When you say you want to add images automatically, do you mean that you want to drop images into a folder and they'd automatically appear on the web page?

    You could do it with PHP where you read images from a folder and echo them onto the web page - something like;
    PHP Code:
        <?php 
        $dh 
    opendir('path/to/img/folder'); // path to image folder
        
    while (false !== ($file readdir($dh))) 
            {
            if (
    strpos($file,'.jpg',1) || strpos($file,'.gif',1) || strpos($file,'.png',1)) // only include .jpg/.gif/.png
                
    {     
                if (
    $file != '.' && $file != '..'
                    {
                     
    $file_array[] = $file;  
                    }
                }
            }
        
    sort ($file_array); // sort images a-z
        
    foreach ($file_array as $img
            {     
            echo 
    '<a href="http://abetterquilt.com/portfolio/2010/'.$img.'" rel="thumbnail"><img style="height:125px" src="http://abetterquilt.com/portfolio/2010/'.$img.'"</a>'
            }
        
    closedir($dh);
        
    ?>
    This would only work of course if your server is running PHP and you can rename your page to end with .php instead of .html/.htm

    If you didn't want to rename your web pages to have the .php extension, and your website runs on an Apache server, and you are able to edit your .htaccess file, you could configure your server to parse html as php: http://php.about.com/od/advancedphp/p/html_php.htm
    It makes the server work a little harder but it is a possibility.
    Last edited by Beverleyh; 04-12-2013 at 09:30 AM. Reason: html as php info added
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I do not have PHP
    I have all my photos numbered 0001.jpg, 0002.jpg, 0003.jpg etc. to add them to the viewer I must manually add them. I am looking for a way to add the first one:

    <a href="http://abetterquilt.com/portfolio/2010/0001.jpg"
    rel="thumbnail"><img style="HEIGHT: 125px"
    src="http://abetterquilt.com/portfolio/2010/0001.jpg"></a>

    THEN have each additional one be added and number changed automatically:

    <a href="http://abetterquilt.com/portfolio/2010/(previous + 1) or 0002.jpg"
    rel="thumbnail"><img style="HEIGHT: 125px"
    src="http://abetterquilt.com/portfolio/2010/(previous + 1) or 0002.jpg"></a>

    Any ideas?

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    To truly automate something I believe you'd need a server-side language, such as php. My php suggestion does exactly what you want so it a shame you cant use it. What other server-side language options do you have on you web account?

    I don't imagine you could automate the process too well with JavaScript (if that is the route you specifically want to go) - I believe you would need to define the images in an array, which defeats the object. I could be wrong but somebody else would need to chip in here to confirm as I'm much more comfortable using php.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you for the z-index setting- problem solved!

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    As long as the images are there, and you know how many, and they're all numbered in sequence with no gaps. You can put this on the page in the spot where you want all of the images to appear (untested, should work unless I have a syntax error):

    Code:
    <div id="thumbviewertarget"></div>
    <script type="text/javascript">
    (function(){
    	var numimages = 1000; //set to the number of images
    	var basepath = 'http://abetterquilt.com/portfolio/2010/'; //path to image folder
    	var ext = '.jpg'; //image extension to use
    	var height = '125px'; //height for thumbnail
    	var targetdiv = document.getElementById('thumbviewertarget'), curim = 0, link, img, src;
    	function padnum(num){
    		num += '';
    		while(num.length < 4){
    			num = '0' + num;
    		}
    		return num;
    	}
    	while(--numimages > -1){
    		src = basepath + padnum(++curim) + ext;
    		link = document.createElement('a');
    		link.href = src;
    		link.rel = 'thumbnail';
    		img = document.createElement('img');
    		img.src = src;
    		img.style.height = height;
    		link.appendChild(img);
    		targetdiv.appendChild(link);
    	}
    })();
    </script>
    It can be tweaked if need be or if there's a problem.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    See my previous post. This version should allow for gaps in the number sequence and allow for setting the number of images higher than the actual number. However, don't set it too much higher, nor allow there to be a lot of gaps in the sequence. Either would waste a lot of time in processing:

    Code:
    <div id="thumbviewertarget"></div>
    <script type="text/javascript">
    (function(){
    	var numimages = 1000; //set to the number of images
    	var basepath = 'http://abetterquilt.com/portfolio/2010/'; //path to image folder
    	var ext = '.jpg'; //image extension to use
    	var height = '125px'; //height for thumbnail
    	var targetdiv = document.getElementById('thumbviewertarget'), curim = 0, link, img, src;
    	function padnum(num){
    		num += '';
    		while(num.length < 4){
    			num = '0' + num;
    		}
    		return num;
    	}
    	while(--numimages > -1){
    		src = basepath + padnum(++curim) + ext;
    		link = document.createElement('a');
    		link.href = src;
    		link.rel = 'thumbnail';
    		targetdiv.appendChild(link);
    		img = document.createElement('img');
    		(function(img, link){
    			img.onerror = function(){
    				targetdiv.removeChild(link);
    				link = img = null;
    			};
    		})(img, link);
    		img.src = src;
    		if(img && link){
    			img.style.height = height;
    			link.appendChild(img);
    		}
    	}
    })();
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Awesome! Is it possible to tweak script to add vertical and horizontal spacing between images? If not, I can try to add spacing when I resize/renumber images.
    Thank you!

    page view: http://www.abetterquilt.com/portfoli...mer-quilts.htm

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Spacing is really a css issue. The images will all be in the id="thumbviewertarget" div. So in your stylesheet you can put something like:

    Code:
    #thumbviewertarget img {
    	border-width: 0; /* prevents default border for any linked image in some browsers that otherwise would do that */
    	margin: 3px; /* adds 3px margin all around each image */
    }
    Green are just comments. You can use a different value for the margin, even use separate top, right, bottom, and/or left margin values. And/or add other styles for the images as desired.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Thumbnail Viewer Script w/ autoload images needs to wait

    Everything is working great except if a thumbnail is clicked on before all images load, close footer and click to close does not function. Is there a way to assure all images load before a thumbnail can be enlarged?
    Thank you in advance


    Quote Originally Posted by jscheuer1 View Post
    Spacing is really a css issue. The images will all be in the id="thumbviewertarget" div. So in your stylesheet you can put something like:

    Code:
    #thumbviewertarget img {
    	border-width: 0; /* prevents default border for any linked image in some browsers that otherwise would do that */
    	margin: 3px; /* adds 3px margin all around each image */
    }
    Green are just comments. You can use a different value for the margin, even use separate top, right, bottom, and/or left margin values. And/or add other styles for the images as desired.

Similar Threads

  1. Replies: 2
    Last Post: 03-31-2013, 06:21 PM
  2. Smooth Navigational Menu link when clicked pops up new window
    By meenakshi in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 03-07-2009, 08:01 AM
  3. Replies: 0
    Last Post: 09-20-2007, 03:45 PM
  4. HV menu pops up in wrong direction
    By grace422 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-02-2005, 05:13 PM
  5. menu pops under flash
    By shagPun in forum JavaScript
    Replies: 5
    Last Post: 06-06-2005, 08:06 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •