SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Advice regarding galleries

    Hi all

    I'm currently building a photography/art website using Ian Lloyd's 'build your own website...' book. The final piece of the jigsaw is to build the gallery and I wanted to produce something similar to this:

    http://www.stephengill.co.uk/portfol...86&id=album-45

    I was wondering if anyone can point me in the right direction as to how I can produce this, or where I can learn to create it?


    Thanks. Any help much appreciated.



    (Apologies to the moderators if I've posted this in the wrong section).

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi Kristeva. Welcome to the forums.

    Many people have created free galleries that run on JavaScript and are quite easy to set up on your site. Here are just a few examples, but you can search for things like "jQuery image gallery" to find a whole lot more that might suit you better:

    http://bxslider.com/examples/auto-show-pager
    http://galleria.io/
    http://css-tricks.com/examples/AnythingSlider/
    http://jquery.malsup.com/cycle/pager2.html
    http://jquery.malsup.com/cycle/pager3.html
    http://nivo.dev7studios.com/demos/
    http://workshop.rs/projects/coin-slider/

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,342
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Many people have created free galleries that run on JavaScript and are quite easy to set up on your site. Here are just a few examples, but you can search for things like "jQuery image gallery" to find a whole lot more that might suit you better:
    Just make sure you get one that degrades gracefully if JavaScript is off, or provide alternative content. In the site you linked to, there is only a blank screen without JS - not a good first impression.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Just make sure you get one that degrades gracefully if JavaScript is off
    Yes, I always test that. Sometimes it's just a matter of a few CSS tweaks to ensure that. If I can't do that with CSS, I don't use the script. (I'm not sure I've tested all the links above for that, though. BX Slider is easily made accessible, though.)

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,342
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, I always test that. Sometimes it's just a matter of a few CSS tweaks to ensure that. If I can't do that with CSS, I don't use the script. (I'm not sure I've tested all the links above for that, though. BX Slider is easily made accessible, though.)
    Sorry, I wasn't very clear in my previous post. I quoted you, but was addressing Kristeva - the site in the first post just shows a blank page without JS.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Sorry, I wasn't very clear in my previous post. I quoted you, but was addressing Kristeva - the site in the first post just shows a blank page without JS.
    Nah, I understood that, but it's also relevant to the ones I posted. I normally categorize them in my lists as ones that can or can't be made accessible ... but just chose at random for that list above, so can't guarantee they all pass from that standpoint.

  7. #7
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool, thanks guys. I'll sift through those links.

    So I assume the style of gallery i linked to is called a 'slider'? That's all I need really, something as simple as that.

    Thanks for the welcome btw.

    P

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    There are two common terms—"slider" and "carousel"—although these involve the content/images literally sliding across the screen, rather than fading in and out. So unless you want the images to slide, you might need to do a wider search like "single image jQuery paged image gallery" or similar.

  9. #9
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kristeva View Post
    Hi all

    I'm currently building a photography/art website using Ian Lloyd's 'build your own website...' book. The final piece of the jigsaw is to build the gallery and I wanted to produce something similar to this:

    http://www.stephengill.co.uk/portfol...86&id=album-45
    If you right-click on the image, you'll find it was created entirely in Flash. If you want that exact effect, you'll need to buy Flash from Adobe and learn to use it. However, it won't work on mobile devices such as the iPhone, so you'll turn away some viewers.


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
  •