Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5

Thread: photo gallery

  1. #1
    Junior Member
    Join Date
    May 2009
    Posts
    3
    Member #
    18943
    is there a way i can make a page that has two parts in.
    on the bottom there's a whole heap of pictures and when you click on one of them, a full sized version of that picture appeares in the top half

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    That would be done with <iframe> ...
    so the picture would appear above without a page refresh.

    There might also be some Flash gallery methods or maybe Javascripting too.

    I think you should go with LightBox and not have a "top half".
    http://www.huddletogether.com/projects/lightbox2/

    There is also "shadowbox":
    http://www.shadowbox-js.com/index.html


  4. #3
    Junior Member
    Join Date
    Mar 2009
    Posts
    2
    Member #
    18497
    I added a photo gallery to my website using Simpleviewer and I have been really happy with it.

    check it out at http://www.airtightinteractive.com/simpleviewer/

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    This is done through DW and works in IE6 and all other browsers. You can see a demo here. It is set to "onmouseover" but you can set it to "onclick".

    Javascript in head section:

    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>

    --------------------------------------------------------

    Image where the large images will appear, surround it with a div box:

    <img src="images/book_big.jpg" alt="Maymers Book" name="bigbook" width="395" height="399" id="bigbook" />

    *note the id, this is how the thumbs know where to swap the image to.

    --------------------------------------------------------

    The thumbnails code:


    Where it says 'bigbook', that is the id for the image above. Surround these in a div also.

    <img src="images/tibby_thumb.jpg" width="105" height="185" onmouseover="MM_swapImage('bigbook','','images/tibby_Link.jpg',1)" onmouseout="MM_swapImgRestore()" />
    <img src="images/maymers_thumb.jpg" width="105" height="185" onmouseover="MM_swapImage('bigbook','','images/maymers_link.jpg',1)" onmouseout="MM_swapImgRestore()" />
    <img src="images/pd_thumb.jpg" width="105" height="185" onmouseover="MM_swapImage('bigbook','','images/pd_link.jpg',1)" onmouseout="MM_swapImgRestore()" />
    <img src="images/dad_thumb.jpg" width="105" height="185" onmouseover="MM_swapImage('bigbook','','images/dad_link.jpg',1)" onmouseout="MM_swapImgRestore()" />
    <img src="images/mom_thumb.jpg" width="105" height="185" onmouseover="MM_swapImage('bigbook','','images/mom_link.jpg',1)" onmouseout="MM_swapImgRestore()" />

    --------------

    where it says "onmouseout="MM_swapImgRestore()"- this puts the image back to what it was before mouseover. Remove it if you want the images to stay when you move the mouse off the thumbnail.


    If you want "onclick" then they look like this:

    <img src="images/tibby_thumb.jpg" width="105" height="185" onclick="MM_swapImage('bigbook','','images/tibby_Link.jpg',1)" />

    ------------------------------------------------------------

    Of course you need to have your own images for the thumbs and the big image box. Make sure all your big images are the same size.

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Sorry for the double post but I wanted this seperate.

    I just removed the swap image restore on the live site so the code will look slightly different than my post, but it just has the restore function removed.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:47 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com