SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    picture gallery like this ..

    please look here:
    http://news.bbc.co.uk/1/hi/in_pictures/4297210.stm

    how can I do a picture gallery like that? am guessing javascript is being used.
    please give an example if possible
    many thanks

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    picture gallery

    The page you linked to provides all you need to do the same thing. All you have to do is "view source"
    There are 9 div-s inside of this div
    HTML Code:
    <div class="mvb">
    The first is
    HTML Code:
    <div id="picGalleryNoScript_0">
    
            <table border="0" width="416" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="1"><img height="10" border="0" width="1" alt="" src="http://newsimg.bbc.co.uk/shared/img/o.gif" /></td>
                    <td width="57"><img height="1" border="0" width="57" alt="" src="http://newsimg.bbc.co.uk/shared/img/o.gif" /></td>
                    <td width="300"><img height="1" border="0" width="300" alt="" src="http://newsimg.bbc.co.uk/shared/img/o.gif" /></td>
                    <td width="58"><img height="1" border="0" width="58" alt="" src="http://newsimg.bbc.co.uk/shared/img/o.gif" /></td>
                </tr>
                <tr>
                    <td><img height="300" border="0" width="1" alt="" src="http://newsimg.bbc.co.uk/shared/img/o.gif" /></td>
    
                    <td><div id="nowPrevious_0"></div></td>
                    <td valign="center" align="middle"><img height="300" id="picture_0" width="220" alt="Armani models" src="http://newsimg.bbc.co.uk/media/images/40859000/jpg/_40859586_armani2_ap220.jpg" /></td>
                    <td><div id="nowNext_0"></div></td>
                </tr>
                <tr>
                    <td colspan="4"><img height="10" border="0" width="1" alt="" src="http://newsimg.bbc.co.uk/shared/img/o.gif" /></td>
                </tr>
                <tr>
                    <td colspan="4" valign="top"><div class="bt"><b>1 of 9</b><br />Some of the world's biggest fashion houses have paraded their wares in Milan this week. Here, models stalk the catwalk in Giorgio Armani outfits.</div></td>
    
                </tr>
            </table>
        </div>
    And the javascript is below the gallery div's divs.
    HTML Code:
    <script language="JavaScript1.2">
    <!--
    
    var picNumOnDisplay = 0;
    
    function picGalleryInsertHTML ()
    {
        var dummyChange, dummyChange1;
    
        for (var i = 0; i < numberOfPicts; i++)
            {
                if (i == 0)
    		{
                        dummyChange = picGalleryBackString;
                        dummyChange = dummyChange.replace(name1,i);
                        dummyChange = dummyChange.replace(name2,(numberOfPicts - 1));
    
                        dummyChange1 = picGalleryNextString;
                        dummyChange1 = dummyChange1.replace(name1,i);
                        dummyChange1 = dummyChange1.replace(name2,(i+1));
    
                        document.getElementById("nowPrevious_" + i).innerHTML = (dummyChange);
                        document.getElementById("nowNext_" + i).innerHTML = (dummyChange1);					
    		}
    		
                else if (i > 0 && i < (numberOfPicts -1))
                    {
                        dummyChange = picGalleryBackString;
                        dummyChange = dummyChange.replace(name1,i);
                        dummyChange = dummyChange.replace(name2,(i-1));
    
                        dummyChange1 = picGalleryNextString;
                        dummyChange1 = dummyChange1.replace(name1,i);
                        dummyChange1 = dummyChange1.replace(name2,(i+1));
    
                        document.getElementById("nowPrevious_" + i).innerHTML = (dummyChange);
                        document.getElementById("nowNext_" + i).innerHTML = (dummyChange1);				
                    }
                else
                    {
                        dummyChange = picGalleryBackString;
                        dummyChange = dummyChange.replace(name1,i);
                        dummyChange = dummyChange.replace(name2,(i-1));
    
                        dummyChange1 = picGalleryNextString;
                        dummyChange1 = dummyChange1.replace(name1,i);
                        dummyChange1 = dummyChange1.replace(name2,((numberOfPicts - i) - 1));
    
                        document.getElementById("nowPrevious_" + i).innerHTML = (dummyChange);									
                        document.getElementById("nowNext_" + i).innerHTML = (dummyChange1);	
                    }
    		
            }
    }
    
    function picGalleryChangeDisplay(show)
    {
    	document.getElementById("picGalleryNoScript_" + picNumOnDisplay).style.display = "none";
    	document.getElementById("picGalleryNoScript_" + show).style.display = "";
    	document.images["picture_" + show].src = pictureSrcArray[show];
    	picNumOnDisplay = show;
    }
    
    if (document.getElementById)
    {
            
            var pictureSrcArray = new Array("/media/images/40859000/jpg/_40859586_armani2_ap220.jpg","/media/images/40859000/jpg/_40859602_versace_ap300.jpg","/media/images/40859000/jpg/_40859590_donatella2_ap300.jpg","/media/images/40859000/jpg/_40859614_moschino_afp220.jpg","/media/images/40859000/jpg/_40859588_dolcegabbana_afp220.jpg","/media/images/40859000/jpg/_40859596_marra_afp300.jpg","/media/images/40859000/jpg/_40859594_krizia2_ap220.jpg","/media/images/40859000/jpg/_40859608_shevchenko_ap220.jpg","/media/images/40859000/jpg/_40859606_versace2_afp220.jpg");
            var numberOfPicts = 9;
            var name1 = new RegExp("string1");
            var name2 = new RegExp("string2");
    
            var picGalleryBackString = "<span class=\"mvb\"><a href=\"javascript: picGalleryChangeDisplay(string2)\">"
    									+ "<img src=\"/nol/shared/img/v3/v3_back_button.gif\" width=\"57\" height=\"28\" border=\"0\" alt=\"Previous\" />"
                                                                            + "</a></span>";
    	var picGalleryNextString = "<span class=\"mvb\"><a href=\"javascript: picGalleryChangeDisplay(string2)\">"
                                                                            + "<img src=\"/nol/shared/img/v3/v3_next_button.gif\" width=\"57\" height=\"28\" border=\"0\" alt=\"Next\" />"
                                                                            + "</a></span>";
    									
    
             				
            for (var i=1; i<numberOfPicts; i++)
    		{
                    document.getElementById("picGalleryNoScript_" + i).style.display = "none";
    		}
    
    
            document.onLoad = picGalleryInsertHTML();
    }	
    //-->
    </script>
    That should be more than enough to get you started

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i understand the HTML part but i would appercaite it if you explain the Javascript part.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    image gallery javascript

    The HTML is in "noscript" divs that show all the images if javascript is not enabled. If it is enabled the CSS is initially set to display: none for all but the first image div. Then basically all the javascript does is change the text using getElementById("....").innerHTML and the image by changing the images src value.
    I would try "copy and pasting" the script with your own images and see how you do. You may want to try reducing the image array to 2 just to make it easier to work with at first. Then work your way up. Keep in mind that this gallery loads all the images on page load so "OW! watch those bytes"


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
  •