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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post

    Whats the best way of building a web gallery for art?

    I'm looking for an overview and explanation of the different techniques of making web galleries and some guidance on how to set up a simple gallery for my website.

    What's the best way to construct a gallery of pictures using CSS? There are so many 'bolt on' technologies out there but I feel nervous about learning new stuff. I've looked at some of the examples in the Dynamic Drive section but some are saying "works in this browser but not in this one, etc." Seeing that always makes me nervous, in case a potential employer can't see my images.

    Because the purpose of my site is to help me find work as an artist in my local area, I want something that is 100% reliable across all browsers and platforms and something that will take the least amount of effort to implement and maintain. Something I can update when I feel like it.

    Some galleries use a page for each image and others open up in a new window. Others seem to pop up out at you in a white box and you can still see the rest of the site behind, faded out. Then others keep the thumbnails in place down the side or underneath, while you are looking at the image in the central box. Will I need to use frames to achieve this?

    If I were to have each picture pop out into a new browser window, how do I make it so that there are no tool bars at the top, so it's just a basic, sqaure window? Will that work on all browsers?

    Or would it be better to use an iframe so that my viewing box is anchored in one place, next to my thumbnails?

    Thank you for your time reading and any general advice you can give will be greatly appreciated. Thanks.
    Last edited by Daniel_A_Varney; 07-01-2011 at 06:46 PM.

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Posts
    103
    Thanks
    0
    Thanked 13 Times in 13 Posts
    My preference for making any kind of gallery or table with dynamic data is to store my information in a database and use PHP to extract the data in rows to get the "gallery" effect. However since you are posting this in the CSS section, I'm not sure how familiar you are with PHP/SQL

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,296
    Thanks
    10
    Thanked 282 Times in 281 Posts
    Quote Originally Posted by Daniel_A_Varney View Post
    What's the best way to construct a gallery of pictures using CSS?
    You can't. CSS is for style, not content. It would be akin to saying "I'm going to build a new studio, what's the best way to set one up with white paint?

    There are so many 'bolt on' technologies out there but I feel nervous about learning new stuff. I've looked at some of the examples in the Dynamic Drive section but some are saying "works in this browser but not in this one, etc." Seeing that always makes me nervous, in case a potential employer can't see my images.
    True, it's a bit of a mess to wade into. Basically you've got a few things to address, like if this is a simple list of images, with no other attributes? Or is it a list of images with associated content like titles and such? Or is it a list of images with associated prices and purchasing options. Those distinctions are pretty critical in figuring out the "best" solution for you. For example:

    A: A simple set of images might be generated by a server application scanning through a directory and creating (on the fly) the appropriate html to display all the images. You could easily add an image to the directory and your application would just pick it up and display it.

    B: But if those images have associated content (titles, creator, size, etc), then you're probably going to be best served by some database of all the images. That means either developing one or using an existing "gallery application".

    C: And then if you want to handle commerce, there are yet again more issues and products you might use for that, and it could be a bit crazy to start the development of something this magnitude.

    Because the purpose of my site is to help me find work as an artist in my local area, I want something that is 100% reliable across all browsers and platforms and something that will take the least amount of effort to implement and maintain. Something I can update when I feel like it.
    Yep, should have all features, be 100% reliable, and cheap, and easy to use

    Some galleries use a page for each image and others open up in a new window. Others seem to pop up out at you in a white box and you can still see the rest of the site behind, faded out. Then others keep the thumbnails in place down the side or underneath, while you are looking at the image in the central box. Will I need to use frames to achieve this?
    The image popping up "above" the rest of the page is called a "lightbox", you can google and find tools to do that. I like the look and there are a lot of flavors of them available for free.

    I would not use frames, iframes, flash, or images popping up in new browser windows. All have bad things associated with them.

    Dave
    Last edited by tracknut; 07-01-2011 at 08:14 PM.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    Hi Tracknut and thank you for your time and detailed post. So you'd recommend lightbox? I can Google that... but first, could you tell me roughly how it works? Is it a Javascript application? Is it relatively easy to set up? Also do you trust this to be compatible across browsers and platforms?

    Thank you very much.

    Ade

  • #5
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,296
    Thanks
    10
    Thanked 282 Times in 281 Posts
    I can't really recommend anything without knowing which category of gallery you're trying to implement. Which do you fall in to, A, B, or C from my list above?

    Lightbox is a Javascript solution and should be pretty portable. It is easy to set up.

    Dave

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    Well, it would come under B, I suppose. Though I figured if the lightbox doesn't allow for written information, I could incorporate that into the image itself, by extending it's white border and applying the words in Photoshop.

    The most important aspect is that it's portable and convenient for both me and the viewer, without the viewer having to leave the page, to view my images in full detail. A bit like you see on Ebay...

    Selling the work would come later. Because it's fine art, sales would be sproradic and I'd be selling them through Etzy anyway. Special commissions would be dealt with by email and dealt with in a separate section. Or that kind of information could occupy a table cell beneath the thumbnail; the buyer just clicks the image to get a larger view.

    My main priority, for now, is to build a showcase for my skills. So there could be a lot of images to display.
    Last edited by Daniel_A_Varney; 07-01-2011 at 10:42 PM.

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    I just found this on Wikipedia. It's not very specific but what do you think?

    Quote Originally Posted by Wikipedia
    Functionality

    Lightbox permits users to view larger versions of images without having to leave the current page,[4] and is also able to display simple slideshows. The use of the dark background, which dims the page over which the image has been overlaid, also serves to disable the remainder of the interface.

    While Lightbox is dependent upon a browser's compatibility with Prototype to function,[2] Lightbox is triggered through a standard link tag. Thus browsers that do not support JavaScript simply load the image as a separate file, losing the Lightbox effect but still retaining the ability to display the full-sized image.[4] Even so, some compatibility problems have been identified with versions of Lightbox, in particular when displaying larger images on Firefox or Opera.[5]

    Many users have also noted that there is a lack of compatibility across the Internet Explorer range of browsers, and in particular, the newly released Internet Explorer 9. However, many times the compatibility issues can be attributed to users not reading the documentation on how to make lightbox function correctly in these browsers.[citation needed]
    So, am I headed for headaches with this thing?

    What's wrong with having a seperate browser window open up? Is that very difficult?

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    I came across this. What do you think?

    http://visuallightbox.com/?gclid=CNP...Fcce4Qodvg8mVg

  • #9
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,296
    Thanks
    10
    Thanked 282 Times in 281 Posts
    Well your most compatible setup will be to use html for the whole gallery, probably generated from server code. Lightbox type tools are a slick interface feature, but yes you can run into more trouble with compatibility, people turning off JS, etc. The lightbox tools I've used fall back well when someone turns off JS, but of course the user interface is different as a result. Most Lightbox tools are set up and managed (manually) quite easily, by putting in image links that look like:
    Code:
    <a href="art.jpg" title="Mona Lisa" rel="lightbox">
    And will display both the image and a title underneath. But to manage changes, you'd be editing code like that, unless you had some sort of gallery tool (Coppermine, as an example) that would allow you to manage the whole gallery via admin tools, rather than coding it.

    Why would you want a separate browser window? Usually separate windows are the responsibility of the end user, and are not something web sites are supposed to create.

    I hope I'm not making this worse...

    Dave

  • #10
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,296
    Thanks
    10
    Thanked 282 Times in 281 Posts
    Quote Originally Posted by Daniel_A_Varney View Post
    I came across this. What do you think?

    http://visuallightbox.com/?gclid=CNP...Fcce4Qodvg8mVg
    Yes, looks pretty nice!

  • #11
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    Quote Originally Posted by tracknut View Post
    Why would you want a separate browser window? Usually separate windows are the responsibility of the end user, and are not something web sites are supposed to create.

    I hope I'm not making this worse...
    No, not making anything worse... Actually informative. I suppose the reason I was thinking about that was because if a person has scrollled some way down a page then clicks an image, when they hit their 'back' button, it will take them back to the top of the page. Then they have to scroll down to where they were, in order to move onto the next image. I don't think that's very user-friendly. So if you cause a new window to open at their end, all they have to do is close it to get back to where they were. Yes, I've heard coders talk about the aspect of 'responsibility' and all that but that doesn't really mean a whole lot to me, a simple artist. I'm just interested to know what sort of difficulties might be entailed in doing this.

    I've looked at the W3C website and there are templates there for creating frames. I was told that frames are bad but if this is so, why is the W3C offering templates for it? So it must still be valid code? I'm thinking that as long as my front page is not in a frameset, it will work with the search engines. No one is going to search for my images by name, (most of them are untitled anyway) so it's really the front page which contains all the stuff for the search engines, such as my name, occupation and other keywords.
    Last edited by Daniel_A_Varney; 07-01-2011 at 11:58 PM.

  • #12
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,296
    Thanks
    10
    Thanked 282 Times in 281 Posts
    Quote Originally Posted by Daniel_A_Varney View Post
    I suppose the reason I was thinking about that was because if a person has scrollled some way down a page then clicks an image, when they hit their 'back' button, it will take them back to the top of the page. Then they have to scroll down to where they were, in order to move onto the next image. I don't think that's very user-friendly. So if you cause a new window to open at their end, all they have to do is close it to get back to where they were. Yes, I've heard coders talk about the aspect of 'responsibility' and all that but that doesn't really mean a whole lot to me, a simple artist. I'm just interested to know what sort of difficulties might be entailed in doing this.
    It's quite simple to bring up a new page, probably doing it as a JS call is the cleanest these days. But I'd say your plan of making a user scroll way down a page of thumbnails to click on an image is flawed. For me, that's the real user interface issue, you should try to keep all those thumbnails on one page. I'm a photographer by trade, by the way, and probably have 20K images posted on my web site and I don't think anyone with a "normal" screen size is having to scroll around to see them.

    I've looked at the W3C website and there are templates there for creating frames. I was told that frames are bad but if this is so, why is the W3C offering templates for it? So it must still be valid code? I'm thinking that as long as my front page is not in a frameset, it will work with the search engines. No one is going to search for my images by name, (most of them are untitled anyway) so it's really the front page which contains all the stuff for the search engines, such as my name, occupation and other keywords.
    Yes, frames are valid code, I'm presuming W3C has a position to list all valid code and that's why you find them listed. There probably are some use cases where frames are valid, but I'm nos sure how this would be one.

    Dave
    Last edited by tracknut; 07-02-2011 at 12:15 AM.

  • Users who have thanked tracknut for this post:

    Daniel_A_Varney (07-02-2011)

  • #13
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    If I wanted to create a kind of square grid of thumbnails in the middle of the page, could I place them next to each other in a long row and would the width of the page cause them to move into rows automatically or would it cause horizontal scrolling?

    In other words, could you offer me any advice on how to arrange thumbnails on the page to make it flexible? Will I have to float them or will they line up next to each other? Or will I need to construct a table to contain them?

    Can I have a look at your page to see how you've designed it, please?
    Last edited by Daniel_A_Varney; 07-02-2011 at 04:14 AM.

  • #14
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Fugix View Post
    My preference for making any kind of gallery or table with dynamic data is to store my information in a database and use PHP to extract the data in rows to get the "gallery" effect. However since you are posting this in the CSS section, I'm not sure how familiar you are with PHP/SQL
    No, not familiar at all. I only know that it's used to build forums but that's where my knowledge of it ends.
    Last edited by Daniel_A_Varney; 07-02-2011 at 12:54 PM.

  • #15
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,296
    Thanks
    10
    Thanked 282 Times in 281 Posts
    Quote Originally Posted by Daniel_A_Varney View Post
    If I wanted to create a kind of square grid of thumbnails in the middle of the page, could I place them next to each other in a long row and would the width of the page cause them to move into rows automatically or would it cause horizontal scrolling?

    In other words, could you offer me any advice on how to arrange thumbnails on the page to make it flexible? Will I have to float them or will they line up next to each other? Or will I need to construct a table to contain them?
    If you wanted a fixed size grid, say 3x3 of thumbnails (which are also fixed size), you could select a fixed window size of 980px and then give each thumbnail 300px. That's too big, but just an example. If those thumbnails looked like <img srg="thumb1.jpg" style="width:300px;margin-left:20px"> then they would stack in, 3 across the page, and wrap to the next row as they fill the line. If the main wrapper was changed from 980px to say 1500px, then 4 thumbnails would stack up per row. If the wrapper were changed to "100%" (ie, whatever size the user's browser is) then the thumnails would stack up at however many will fit on the row. That one seems a bit like what you may be looking for, to be flexible (ie "fluid design")
    across browser window sizes.

    You could do it with a table, but that implies a rather fixed layout that could be a problem to maintain as well.

    Can I have a look at your page to see how you've designed it, please?
    My site is www.pixf.com, and I use a product called Photocart for the image galleries for my event proofs.

    Dave

  • Users who have thanked tracknut for this post:

    Daniel_A_Varney (07-02-2011)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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