SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please help with photo gallery

    Hi guys,

    I'd appreciate some help with this JavaScript code that I've found online and that I'm trying to tweak in order to fulfill my specific needs. What I like about it is that the thumbnail gets created automatically by using the actual big picture as a background image. The problem I'm having at the moment is with activating the new big image. I get to the point where I reset visibility for all and can't figure our how to make the new one visible. It's straightforward for the thumbnail because it uses the word this, but I can't use "i" to control which big image becomes visible because "i" has already run to the end (=6).

    Sorry I'm definitely no JS wizard! Please see my comment surrounded by hashes to figure out where I'm stuck.

    Thanks in advance for your help guys!

    Code:
    <!-- BEGIN SCRIPT -->
    <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
    <script type="text/javascript">
        
        /* Start CDATA to pass validation and hide script from old browsers */
    	/* <![CDATA[ */
        
        /* Use display: none on gallery list to avoid showing the whole lot before JS kicks in. Could use a preloader here */
    	document.write("<style type='text/css'> #gallery { display: none; } </style>");
        
    	var gal = {
        
        init : function() {
    		
    		//Check if basic support exists
            if (!document.getElementById || !document.createElement || !document.appendChild) return false;
            
            //Assign a new id to the gallery <UL>. There are two ULs in the page: id='gallery' and id='thumbs'
            if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
            
            //Store the list elements of both lists in two arrays
            var li = document.getElementById('thumbs').getElementsByTagName('li');
    		var libig = document.getElementById('jgal').getElementsByTagName('li');
            
            // Make both the first thumb and the first big image active. This is styled in the CSS (thumb has border and opacity, big image gets display: block)
            li[0].className = 'active';
            libig[0].className = 'active';
            
            //Enter the loop to create the thumbnails
            for (i=0; i<li.length; i++) {
            	
            	// Create the thumbnail image (in the CSS the style gives width, height, background position, border, etc.)
                li[i].style.backgroundImage = 'url(' + libig[i].getElementsByTagName('img')[0].src + ')';
                li[i].style.backgroundRepeat = 'no-repeat';
                
                //Add the click event
                gal.addEvent(li[i], 'click', function() {
                    
                    //Create a coupel of arrays to store the lists elements (small and big images)
                    var im = document.getElementById('thumbs').getElementsByTagName('li');
                    var bigim = document.getElementById('jgal').getElementsByTagName('li');
                    
                    //Enter the loop to remove all active stauses
                    for (j=0; j<im.length; j++) {
    					// First remove all active from all thumbs
    					im[j].className = '';
    					// Plus, make the big image active as well
    					bigim[j].className = '';
    				}
                    
                    // Then make the clicked thumbnail active
                    this.className = 'active';
                    
                    //########################################################
                    //HOW TO ALSO ACTIVATE THE DIFFERENT BIG IMAGE?? I'M STUCK HERE! :)
                    //########################################################
                    
                });
                
                
    
            }
        },
        
        addEvent : function(obj, type, fn) {
            if (obj.addEventListener) {
                obj.addEventListener(type, fn, false);
            }
            else if (obj.attachEvent) {
                obj["e"+type+fn] = fn;
                obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
                obj.attachEvent("on"+type, obj[type+fn]);
            }
        }
    }
    
    gal.addEvent (window, 'load', function(){gal.init();} );
    
    /* End CDATA to pass validation and hide script from old browsers */
    /* ]]> */
    
    </script>
    <!-- END SCRIPT -->
    This is the HTML:

    Code:
    <ul id="thumbs">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    
    
    <ul id="gallery">                
    <li><img src="images/gallery1/foto1.jpg" alt="Gallery 1 - Photo 1" /></li>
    <li><img src="images/gallery1/foto2.jpg" alt="Gallery 1 - Photo 2" /></li>
    <li><img src="images/gallery1/foto3.jpg" alt="Gallery 1 - Photo 3" /></li>
    <li><img src="images/gallery1/foto4.jpg" alt="Gallery 1 - Photo 4" /></li>
    <li><img src="images/gallery1/foto5.jpg" alt="Gallery 1 - Photo 5" /></li>
    <li><img src="images/gallery1/foto6.jpg" alt="Gallery 1 - Photo 6" /></li>
    </ul>
    And these are the relevant syles, nothing fancy really:

    Code:
    /* Gallery pages */
    
    #thumbs {
    	list-style: none;
    	width: 120px;
    }
    
    #thumbs li { 
    	opacity: .5; 
    	float: left;
    	display: block; 
    	width: 40px;
    	height: 40px; 
    	background-position: 50% 50%;  /* It generates the thumbnail image*/
    	cursor: pointer; 
    	border: 3px solid #fff;
    	margin: 0px 4px 14px 10px;
    }
    
    /*Active img*/
    #jgal li.active img { 
    	display: block;
    }
    	
    /*Image hover effect*/
    #thumbs li.active, #thumbs li:hover { 
    	outline-color: #bbb; 
    	opacity: .99 /* safari bug */
    }
    
    /* JS images styles : thumbnails and full size images */ 
    
    
    #jgal {
    	list-style: none;
    	width: 120px;
    }
    
    
    /*Central img styles */
    #jgal li img { 
    	position: absolute; 
    	top: 0px;
    	right: 0px; 
    	display: none; 
    	margin: 0;
    	padding: 0;
    }

  2. #2
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again guys.

    Just wanted to share a solution I've found for this problem, which does the trick, but doesn't look very robust or elegant so any better ideas are more than welcome. I realized that the problem here is essentially to find out which thumbnail had been clicked in order to decide which large image to make visible. In particular we need a numerical reference to the position, in the array, of the thumbnail so we can simple say load bigimage[n]. I haven't figured out how to do that, but I have added a line of code that adds an ID to each thumbnail in the first loop.

    Code:
    li[i].id = i; //Assign numeric ID to each thumb list element
    and I have then used that ID to select the large image to make visible further down.

    Code:
    var current_thumb = this.id;
    //Large image switch done here!
    bigim[current_thumb].className = 'active';
    Now it all works, but it feels like there could be a better solution.

    Again thanks in advance to whoever will be spending a bit of time on my post.

    Best.


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
  •