SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Gallery

    Hello, I'm new to this forum and would like to know which method is recommended for producing an image gallery. Using thumbnails linking to full size images or an automated service of some kind, any help would be greatly appreciated, thanks.
    Last edited by 123archon; Jun 7, 2009 at 04:15.

  2. #2
    SitePoint Member
    Join Date
    Aug 2000
    Location
    Singapore
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to the Forum. There are lots of ways to create image galleries. It really depends on what kind of software you are using or what kind of website you are making.
    An easy website creation and management tool I promote Pronta CMS has an automatic image gallery so it's just a matter of browsing to your photos and then choose how you want to display them. Very easy! You can try it free http://prontacms.com

  3. #3
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi their thanks for the welcome
    Iím making a PC game fansite and trying to achieve a screenshot gallery, thumbnails to full size screenshots. Thank you for the link and response, I will take a look

  4. #4
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    If you aren't looking for just a quick fix for this Image Gallery you would like to implement, then you could code it by hand. If you know what you're doing with HTML / XHTML and CSS and you have the time to do it.

    A while back I had the same problem. Should I create it with divs for each thumbnail or a list? It's clear that you should create an image gallery you're describing with a list.

    Have a list of the thumbnail images linking to full-size images and simply style the unordered list and list tags in the CSS with appropriate padding, margins and border properties and maybe even rollover effects you may want included.

    For help on how to achieve this you could purchase SitePoint's - The Art & Science of CSS and check out Chapter 2 on Images and Image Galleries.

    Hope that helps you and goodluck with the Website!

    Andrew Cooper

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2007
    Location
    SW Washington, USA
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It kind of depends on what kind of gallery you want. Is it a gallery just you will be posting images to and updating infrequently? For that I use the auto web gallery creations in photoshop or photoshop elements. The old versions make html galleries, newer ones are Flash galleries.

    I've heard good things about jalbum, a free gallery maker.

    If you want users to upload images I am not sure. I have seen sites that use flickr groups to upload and comment on images.

  6. #6
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response, coding by hand is something I would like to be able to achieve, I am learning XHTML & CSS. I produced the following code in a list format, please feel free to comment.

    <a href="screenshots/ss19-hires.jpg"/><img src="screenshots2/ss19-hires.jpg" alt="" height="150" width="200"/>

    I will take a look SitePoint's - The Art & Science of CSS

    Yes its a gallery only i will be posting images to and updating infrequently, a have Photoshop CS4 and that is currently also new to me as well.

    Many Thanks

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    A starting point could be:

    Code HTML4Strict:
     
    <ul id="gallery">
        <li><a href="large.jpg" title="Game Title"><img src="thumbnail.jpg" alt="Game Title"></a></li>
        <li><a href="large.jpg" title="Game Title"><img src="thumbnail.jpg" alt="Game Title"></a></li>
        <li><a href="large.jpg" title="Game Title"><img src="thumbnail.jpg" alt="Game Title"></a></li>
    </ul>

    Some sample CSS you could play with that'd allow three thumbnails per row:

    Code CSS:
    ul#gallery {
         list-style:none; /* remove default bullets from list elements */
         float:left; /* float the unordered list to the left */
         width:600px; /* width of the container for your thumbnails*/
    }
     
    ul#gallery li {
         padding:5px; /* add some padding for your images */
         margin:0; /* removes margins */
         float:left; /* list items will be ordered horizontally */
    }
     
    ul#gallery a {
         text-decoration:none; /* remove underline from anchor */
    }
     
    ul#gallery img {
         border:0; /* remove default border from thumbnail images */
         width:190px; /*  width of your thumbnail image */
         height:150px; /* height of your thumbnail image */
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might want to look at these for ideas:
    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  9. #9
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all this is very helpful, much appreciated im playing around with the provided examples

  10. #10
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have hand-coded an image gallery using a list, with up to 15 thumbnails in each page. The user can then click onto the thumbnail to see a bigger version, using lightbox.

    For each image the code contains:

    <li><a href="images/imagename.jpg" rel="lightbox[home]" title="imagetitle">
    <img src="Thumbnails/imagetn.jpg" alt="imagename" />
    </a></li>

    The rel attribute allows users to scroll through all of the images on that page. The site can be found at:

    www.etrangere.co.uk/MDMA.htm

    This requires that code to be written for each image added so there are probably much more efficient automated ways to code it.

    I don't have the direct URL for lightbox but if you google it then you should find it quite easily. It's a well-used technique (some may say overused) to allow larger images to appear from thumbnails. You need to upload some documents onto your web server and link to those documents in the head of your HTML.

    Hope that helps.

    Susan
    www.etrangere.co.uk/MDMA.htm
    - Mad-Dog McFarlane Art

  12. #12
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello, Thanks for info on Lightbox. I have produced a gallery using lightbox2 and it works well but I get a message in IE saying: restricted this webpage from running scripts or ActiveX etc..... as im sure your aware of the message.

    How do get around this pop-up message as ive noticed other sites using Lighbox that do not receive this message. I don't no any javascript just yet as im concentrating on xhtml & css at the moment.

    Many Thanks

  13. #13
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    problem solved, my simple error.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    How do get around this pop-up message as ive noticed other sites using Lighbox that do not receive this message.
    You'll only get that message if you are using the file locally (and depending on your security settings) . Once it's online you won't get the message and neither will anyone else..

  15. #15
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. I was using the file locally. Once I hosted the site I didnt get the message and all worked well. Thanks for the reply anyway.


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
  •