Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Photo Gallery

  1. #1
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts

    Photo Gallery

    Hi,

    I want a simple gallery for my website where you click (or hover) over the image and it displays the image in a different div.

    Here is my site http://www.printco.org/design.html

    Please can someone explain how this is done or point in the way of a decent tutorial.

    Thanks,

    Josh

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Sounds like what you're interested in is a CSS remote rollover. They can be daunting at first but make a lot of sense once you get your mind around them. Here are a couple of good tutorials:

    http://bokehman.com/rollover/

    http://www.soulbeams.net/webtech/css/remoterollover/
    matt | design | blog

  • #3
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    Yeah that's exactly what's been happening. I've looked at a few from google and just not understood how they worked so thought I would try here and see if there are any good ideas. Will give yours a go now thanks

    On a side note are you getting a warning message when going on the site?

    Warning: Visiting this site may harm your computer!
    The website at www.printco.org appears to host malware – software that can hurt your computer or otherwise operate without your consent. Just visiting a site that hosts malware can infect your computer.
    For detailed information about the problems with this site, visit the Google Safe Browsing diagnostic page for www.printco.org
    How can that be if all I've put in it is html code?

  • #4
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    Hi,

    I have been using the first gallery that was suggested it is really neat, however is it possible to put the large image in a different div?

    This is what I currently have

    Code:
              <div id="contentLeft">
    				<a href="#"><img src="images/thumb.jpg" alt="" id="thumb" /><span><img src="images/thumb1.jpg" alt="" height="500" width="500" /></span></a> 
    				<a href="#"><img src="images/thumb1.jpg" alt="" id="thumb2" /><span><img src="images/thumb.jpg" alt="" /></span></a> 
                </div>
    <div id="contentRight"> 
    </div>
    I would like to be able to put the picture that loads in the right hand side div. If I put the large image in the other div the image just appears so it doesn't appear on hover. I can use the position absolute to position it there but then if you use different size images then it doesn't align properly in the middle.

    Here's what it looks like http://www.printco.org/design.html

    Thanks,
    Josh

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    There is an image program on my site here.


    It was designed for me by Avril, one of the forums coders.

    Another one for luck.

    Another in development form here.


    Lots of useful stuff here.


    Frank
    Last edited by effpeetee; 07-02-2010 at 12:11 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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