Is this image gallery method... valid?

[L.Adlon]

A few years ago, I was looking for a very simple way to display a bunch of images on my website, aside from the usual group of hyperlinked thumbnails, each leading to a separate 'larger version' page.

 

One of the things I came up with was a scrolling window that contained a single long, horizontal image (consisting of each of the images I wanted in the gallery, placed side by side on this 'strip').

 

The image itself was bigger than the window, and so you would scroll (horizontally) to reveal the other images.

 

Seemed to work, and was a (seemingly) good way to have a lot of images, yet the only space taken up was the (set) size of the window. To add more images, I simply edited the image strip (added more images to the long image file, extending the size as needed when I ran out of room).

 

I had researched a number of options, and even though I found a few really nice methods, compatibility seemed to always be an issue. For example, the use of iFrames initially seemed perfect, but then there seemed to be talk of compatibility issues. I think it was something like it wouldn't work on mobile devices? Macs?

 

 

So, the coding for my scrolling window method was simply:

 

<div class="gallerywindow"><img src="image/gallerystrip1.jpg" width="2700" height="200" border="0"></div>

 

And the gallerywindow class was defined as gallerywindow {width:800px; height:216px; overflow:x-scroll; ....} (the extra 16 of the 216 width was to make room for the scroll bar)

 

 

Now, I know anyone even remotely professional or well-versed in HTML probably just dry heaved, but please keep in mind I was just learning, and wanted a simple solution, without resorting to scripting or HTML methods that were unfamiliar to me.... as I was hand-coding all this stuff, and I was the only one working on it (and therefore had to fix things if they weren't working). So, simplicity and familiarity were key.

 

That all said, is this method 'valid'... in that it would work on all browsers and platforms, and not break or do anything other than work properly? Is there a similarly simple method that would be more ideal?

 

I would be open to any type of gallery display (scrolling window, thumbnails that zoom up to bigger versions... whatever.... as long as it's on the same page). I'd prefer one that doesn't use javascript, only in that I don't know javascript, so I can't fix/modify it, if needed... plus, I worry that relying on it might result in the site gallery being non-functional if they have javascript blocked.

 

 

So, I'm curious how you guys would approach this sort of thing, these days... again, keeping in mind I'm talking about a very simple method (...as I have to understand it, be able to fix/modify it, and my site is just a simple, low-traffic site with very simple requirements).

 

Currently (for my new version of the site), I'm simply selecting a few images, and displaying them at a medium size directly on the page.... No larger version when you click on it or anything. Works fine for me, but I'm curious how a simple gallery might be done these days.

Edited May 25, 2014 by L.Adlon

[davej]

An image gallery. The general approach you describe is pretty common. I think there are several jQuery plugins that do exactly what you are describing.

 

Why do you seem to have just one image that is 2700px wide? The whole idea is to fill the scrolled div with a row of individual images that can then be maximized individually or run as a slideshow.

[L.Adlon]

The theory, at the time, as that this method meant that any addition to the library simply required the image strip to be changed. I'd have the Photoshop file on hand, with each image on a separate layer, but assembled side by side on the long white strip of the canvas. Rearranging the images meant just moving them in the Photoshop file (as opposed to the HTML code), and adding more pics meant just stretching the canvas further to the right in Photoshop, and dropping in the new images. Meanwhile, the online code would stay untouched (aside for, I guess, the width attribute of the <img> tag).

 

On the site, you'd have this fixed size window with a scrollbar, and the first few images visible, and you'd scroll to the right to see the rest of them.

 

Not saying it was the best way, by any means... Just the best way I knew how, with my limited HTML/CSS knowledge, and seemingly the safest as far as compatibility and ease of understanding. I did notice some scripts and such, but they were foreign to me, so I couldn't modify them, nor fix things when they went weird, so I tended to stay away from them. I wasn't sure of their compatibility, either. Not keeping up to date on current HTML/CSS trends and methods had left me kind of paranoid about compatibility of things I wasn'f fully aware of.

 

I've recently seen java-free CSS gallery routines that seemed interesting. Over the last few years, I've noticed the jQuery stuff popping up, as well.

 

Just kind of wondering if my method (even though it's not ideal) was still 'valid', or if it has compatibility issues or something. I'll be looking into the current offerings for galleries, but am always trying to keep things as simple as possible.

[davej]

It is a fairly simple task to write code that inserts a collection of images into a "slider" like that. I've written code to do that in the past. Here is some old code...

<!DOCTYPE html><html lang='en'> <head> <meta charset='utf-8'><title>Simple Gallery</title><style>#large {width: 640px; height: 480px; }#thumbs {padding-top: 12px; overflow: auto; white-space: nowrap; width: 640px;}#thumbs img {padding: 1px; width:  80px; height: 60px;}#thumbs img:hover {background: #00F;}</style><script>var path = [];path[0]='http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg';path[1]='http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg';path[2]='http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg';path[3]='http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg';path[4]='http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg';path[5]='http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg';path[6]='http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg';path[7]='http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg';path[8]='http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg';window.onload = init;function init(){var len = path.length;var thumb_img;for(var i=0 ; i<len ; i++){thumb_img = document.createElement("img");thumb_img.src = path[i];thumb_img.id = "p"+i;thumb_img.alt = "p"+i;thumb_img.onclick = loadthumb;document.getElementById('thumbs').appendChild(thumb_img);}document.getElementById('large').src = path[0];}function loadthumb(){var pid = this.id;var i = pid.substring(1);document.getElementById('large').src = path[i];}</script></head> <body> <p>Note that this example gallery loads only three unique image files and uses the same image for the thumbs and the full size image</p><img id="large"/>  <div id="thumbs"></div> </body></html>

[dsonesuk]

Its probably better to include thumbnail images, surrounded by anchor elements to the larger images, that way google can see these images, and if javascript is disabled clicking the link will open new page so they can still see the full size. image. Just use javascript to prevent links working and use anchor href to place full size image link for the larger img element.

[dsonesuk]

<!DOCTYPE html><html lang='en'>    <head>        <meta charset='utf-8'>        <title>Simple Gallery</title>        <style>            #large {                width: 640px;                height: 480px;                visibility: hidden;            }            #thumbs {                padding-top: 12px;                overflow-x: auto;                white-space: nowrap;                width: 640px;height: 90px;            }            #thumbs img {                padding: 1px;                width:  80px;                height: 60px;            }            #thumbs img:hover {                background: #00F;            }            #thumbs a {display:inline-block; white-space: nowrap;}        </style>        <script>            var img_anchors, large_img;            window.onload = init;            function init() {                var parent_container = document.getElementById('thumbs');                img_anchors = parent_container.getElementsByTagName('A');                large_img = document.getElementById('large');                large_img.style.visibility = 'visible';                large_img.src = img_anchors[0].href;                for (var i = 0; i < img_anchors.length; i++) {                    img_anchors[i].onclick = function(event) {                        event = event || window.event;                        //prevent links from working,  other better browsers and then windows method                        event.preventDefault ? event.preventDefault() : event.returnValue = false;                        large_img.src = this.href;                    };                }            }        </script>    </head>    <body>        <p>Note that this example gallery loads only three unique image files and uses the same image for the thumbs and the full size image</p>        <img id="large" src="" alt="">        <div id="thumbs">            <a href="http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg"><img src="http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg" alt=""></a>            <a href="http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg"><img src="http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg" alt=""></a>            <a href="http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg"><img src="http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg" alt=""></a>            <a href="http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg"><img src="http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg" alt=""></a>            <a href="http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg"><img src="http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg" alt=""></a>            <a href="http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg"><img src="http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg" alt=""></a>            <a href="http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg"><img src="http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg" alt=""></a>            <a href="http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg"><img src="http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg" alt=""></a>            <a href="http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg"><img src="http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg" alt=""></a>        </div>    </body></html>

You don't have to update the array each time as well, all you do is add image within anchor link to large image within the thumbs container.

[Ingolme]

The only problem with having every single image in one file is that it's going to take minutes before you can see any of the images. Image files load from top to bottom (or bottom to top if it's BMP format), so if they're all horizontal to each other you won't see any of the images until all of them have loaded.

[dsonesuk]

Why it would be better to use thumbnails, and preload images AND not use tables as the table has to finish before the content in the table starts to load causing further delay.

[davej]

The optimum method for this sort of thing would probably be some Php (or other server-side) routines that would generate or re-generate files containing the arrays (or HTML) for all of the image files in a specified directory. This sort of gallery is often used with photo uploads and so after uploading a few hundred photos the process of managing them really needs to be completely automatic. I plan to write such code but have not quite gotten around to it.

[dsonesuk]

been there done that

Edited May 27, 2014 by dsonesuk

[L.Adlon]

Yep, there's plenty of scripts and premade things... Again, those work great, but I tend to lean towards things I am familiar with and understand the workings of. Premade scripts and such are great, unless I need to fix something... and then I'm completely lost and have no options. My limited knowledge in this is the limitation, as opposed to the tech. Plus, I can't account for how compatible things are, when I'm not clear on what they are doing!

 

Oddly enough, my 'long image strip' method didn't present a loading delay. I tended to compress things pretty heavily back then, plus the image wasn't terribly huge. As well, back then I was still catering to dial-up people!

 

For my new version of the site, I'm just picking 4 images for each section, and displaying them in a 'medium' size... small enough to load fast, but big enough to see enough detail. Seems to work great. I'm just curious what to best use if I wanted to do a proper gallery. I guess I'd just explore the existing pre-made gallery offerings. As I mentioned, I've even seen javascript-free versions that were pretty neat. I'm still a bit cautious, since I don't know their inner workings (and, therefore, limitations and quirks).

 

At worst, I do the traditional thumbnail gallery hyperlinked to larger images on separate pages, as I've done up to now. I just was hoping to avoid having to maintain all those fullsize version pages, and creating the thumbnails. Not terribly tedious work, but if there's an easier way, I'd be curious to see it. Problem is, many of the solutions I did find (which were clever, efficient and easy to maintain) used coding/methods that were unfamiliar to me. Not a deal-breaker, but I do like to know how things work, rather than blindly slap them in and assume everything is fine.

 

That code that dsonesuk shows, for example (...thanks for that) looks good, but it's wandering into unfamiliar territory for me (....I'm rusty with functions and some of the syntax). Much of the efficient, modular type methods are, unfortunately.