Avatar of cescentman
cescentman
Flag 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:-

http://www.stevenlingham.com/Allotment-Shed-Forage.htm

... 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.
JavaScriptAJAX

Avatar of undefined
Last Comment
cescentman

8/22/2022 - Mon
Michel Plungjan

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
cescentman

ASKER
Thanks for getting back to me.

I'm using http://yoxigen.com/. 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?
Michel Plungjan

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:
http://yoxigen.com/yoxview/Contact.aspx
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
cescentman

ASKER
I have already done that. Currently no response hence my posting the question here.
Michel Plungjan

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.
cescentman

ASKER
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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Michel Plungjan

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
cescentman

ASKER
OK Thanks anyway
ASKER CERTIFIED SOLUTION
Justin Pilditch

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
cescentman

ASKER
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.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Justin Pilditch

Not such an onerous task though, as you already have your thumbnails on the page. All you are doing is changing their layout.
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Justin Pilditch

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:

<style>
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
}
</style>
<div class="thumbArray">
    <div class="thumb">
        <img src="thumbnail #1" />
    </div>
    <div class="thumb">
        <img src="thumbnail #2" />
    </div>
    <div class="thumb">
        <img src="thumbnail #3" />
    </div>
    etc.
    etc.
</div>

Open in new window

Michel Plungjan

And hopefully you got some ideas on how to pose a question that is easier to answer.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
cescentman

ASKER
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.
Michel Plungjan

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
cescentman

ASKER
The question wasn't really answered, however I ma grateful for Murfur's contribution
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck