JS Thumbnail Viewer

cescentman
cescentman used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michel PlungjanIT Expert
Top Expert 2009

Commented:
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

Author

Commented:
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 PlungjanIT Expert
Top Expert 2009

Commented:
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
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I have already done that. Currently no response hence my posting the question here.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
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.

Author

Commented:
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.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
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

Author

Commented:
OK Thanks anyway
Full Stack Developer
Commented:
Couldn't be easier as there are any number of ways to make the ribbon - the lightbox/slideshow functionality is controlled by the links behind the thumbs, not the display of the thumbs themselves.

At the entry level, simply put your static tumbrils in an unordered list and set the CSS for the list elements to be inline to display it horizontally. At the other end, you could use a jQuery accordion.

If you want some ideas for the array have a look at http://wowslider.com

Author

Commented:
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.
MurfurFull Stack Developer

Commented:
Not such an onerous task though, as you already have your thumbnails on the page. All you are doing is changing their layout.
I guess not, just waned to be sure I had a solution that showed well on mobile devices too.
MurfurFull Stack Developer

Commented:
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 PlungjanIT Expert
Top Expert 2009

Commented:
And hopefully you got some ideas on how to pose a question that is easier to answer.

Author

Commented:
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 PlungjanIT Expert
Top Expert 2009

Commented:
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

Author

Commented:
The question wasn't really answered, however I ma grateful for Murfur's contribution

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial