Link to home
Start Free TrialLog in
Avatar of cescentman
cescentmanFlag for United Kingdom of Great Britain and Northern Ireland

asked on

JS Thumbnail Viewer

I am currently using a lightbox viewer that is driven from static thumbnail links and I want to keep using this viewer. I want to create a ribbon of thumbnails instead. Visually very like this:-

... obviously not coded in this way!

The thumbnails are already created on the site and are for pictures that have varying aspect ratios and the thumbnails reflect this with a constant height of 100px but varying width.

My only other requirement is that the strip responds elegantly if viewed on a portable device such as iPhone/Galaxy etc.

I would be grateful of any suggestions.
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Please post an example of the current viewer. We cannot amend something we cannot see.

Perhaps the viewer's documentation shows how to do this already

Also this sounds like custom coding rather than helping you with fixing an issue you have
Avatar of cescentman


Thanks for getting back to me.

I'm using I must admit I hadn't seen my question as "fixing" or amending anything, I was wondering if a thumbnail strip solution existed as a bolt on.

Perhaps I'm wrong?
Possibly, but how would we know before you posted the actual name of the script?

I looked in the documentation and could not immediately see something.
I would ask first:
I have already done that. Currently no response hence my posting the question here.
That would have been useful information.

Please when you ask a question here, disclose as much information you can.

In this case a) the script you are using b) that you investigated the documentation and c) the fact you asked them without reply

These are all things I now have spent time on doing instead of investigating how to add a strip to the code they are using. I for example now need to know how you call the script and an example of your HTML.
Well the reason why I didn't post any further information was that I was enquiring as to whether anyone knew of any generic JS that would allow me to display thumbnails in a strip as per the example. I wasn't asking for help to amend the script I'm currently using. Had I been doing that I would have included much more information.
Then the answer is no.

There is no generic script to show thumbnails.

Such a strip would have to adhere to the rules of the script that does the lightbox effect.

I can whip you up a script that shows thumbnails, but then I would need to ask you more details such as
- why do you need a script, a strip thumbnails can be generated on the server
- if you need a script you may need a server process too to find the name of the images to show
- if you need a server process, you do not need a client side script

and so on. I apologise if I sound like I do not want to help you, but your question is way to vague to give a proper answer
OK Thanks anyway
Avatar of Justin Pilditch
Justin Pilditch
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I thought this was the case. I was hoping that there might have been a solution lurking out there to save me re-inventing the wheel. I guess I'll have to buckle down and put something together.
Not such an onerous task though, as you already have your thumbnails on the page. All you are doing is changing their layout.
Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
That is all down to the CSS applied to the elements. By default they should flow naturally according to the real estate available and only really misbehave when you try to force a specific layout or style.

The only way to check it is to try it on different devices and then adjust but you could start with something like this:

div.thumbArray {
    width: 80%;

div.thumb {
    width: 100%;
    height: 6.25em;
    float: left;
    position: relative;
    margin: 0.46375em;
    display: inline-block;

div.thumb img {
    height: 6.25em
<div class="thumbArray">
    <div class="thumb">
        <img src="thumbnail #1" />
    <div class="thumb">
        <img src="thumbnail #2" />
    <div class="thumb">
        <img src="thumbnail #3" />

Open in new window

And hopefully you got some ideas on how to pose a question that is easier to answer.
No Michael. In general I find the support on EE to be first class. In this case I think you needed to answer the question that was posed.
I wasted time duplicating your investigations and came to the conclusion you would not provide me with the information needed to help you despite repeated requests. Remember we are unpaid volunteers and as the name implies an Exchange and not a "guess what I want and provide the codez"
I really wanted to help but as said: no there is nothing generic or already written for your script so it is custom coding.
Have a great weekend
The question wasn't really answered, however I ma grateful for Murfur's contribution