Javascript Image Slider / Posts /

How to place thumbnail columns around both sides?

89
What coding must be used to place thumbnail columns on both sides of slider? As referenced in Demo #2.  Yes, I understand that a license must be purchased in order for it to work on the web, however, before I purchase I need to know it will work locally.  Any help would be appreciated.
Jason  10 years ago   viewed: 25066    

3 Answers

-9
Yes it can be done by updating the HTML and CSS code as below (update the demo2.html in the download package):
Note your js-image-slider.js code should be at least the version v2013.8.27
<!DOCTYPE html> <html> <head> <title>Demo 2</title> <link href="themes/2/js-image-slider.css" rel="stylesheet" type="text/css" /> <script src="themes/2/js-image-slider.js" type="text/javascript"></script> <link href="generic.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="div1"><h2>Demo 2</h2></div> <div id="sliderFrame"> <div id="thumbs"> <div style="float:left;border-top:1px solid #CCC;"> <div class="thumb"> <div class="frame"><img src="images/thumb1.jpg" /></div> <div class="thumb-content"><p>HTML Content</p>Thumbnails allows any HTML content</div> <div style="clear:both;"></div> </div> <div class="thumb"> <div class="frame"><img src="images/thumb2.jpg" /></div> <div class="thumb-content"><p>Customizable</p>Thumbnail style is customizable</div> <div style="clear:both;"></div> </div> </div> <div style="float:left;padding:0 20px;"> <div id="slider"> <a href="http://www.menucool.com/jquery-slider" target="_blank"> <img src="images/image-slider-1.jpg" alt="Welcome to jQuery Slider" /> </a> <a class="lazyImage" href="images/image-slider-2.jpg" title="Pure Javascript. No jQuery. No Flash.">Pure JavaScript</a> <a href="http://www.menucool.com/javascript-image-slider"><b data-src="images/image-slider-3.jpg">Image Slider</b></a> <a class="lazyImage" href="images/image-slider-4.jpg" title="">Slide 4</a> </div> </div> <div style="float:left;border-top:1px solid #CCC;"> <div class="thumb"> <div class="frame"><img src="images/thumb3.jpg" /></div> <div class="thumb-content"><p>Variety of Layouts</p>Just a CSS tweak.</div> <div style="clear:both;"></div> </div> <div class="thumb"> <div class="frame"><img src="images/thumb4.jpg" /></div> <div class="thumb-content"><p>Integration</p>Built-in functions for the thumbnails</div> <div style="clear:both;"></div> </div> </div> <div style="clear:both;height:0;"></div> </div> </div> </body> </html>

And also update the js-image-slider.css:

/* http://www.menucool.com */ /*slider frame*/ #sliderFrame { width:1190px; margin:0 auto; /*center-aligned*/ padding:20px; box-shadow: 0 0 5px #BBB;border:1px solid #CCC; background-color:#FFF; } #slider, #slider div.sliderInner { width:680px;height:306px;/* Must be the same size as the slider images */ } #slider { background:#fff url(loading.gif) no-repeat 50% 50%; position:relative; transform: translate3d(0,0,0); } /* the link style (if an image is wrapped in a link) */ #slider a.imgLink, #slider .video { z-index:2; position:absolute; top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%; } #slider .video { background:transparent url(video.png) no-repeat 50% 50%; } /* Caption styles */ #slider div.mc-caption-bg, #slider div.mc-caption-bg2 { position:absolute; width:400px; height:auto; padding:10px 0;/* 10px will increase height.*/ left:120px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/ bottom:10px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/ z-index:3; overflow:hidden; font-size:0; } #slider div.mc-caption-bg { /* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/ background:#DDD;/* or any other colors such as Black, or: background:none; */ border:1px solid white; border-radius: 5px; } #slider div.mc-caption-bg2 { background:none; } #slider div.mc-caption { font:bold 13px/16px Arial; color:#069; z-index:4; text-align:center; background:none; } #slider div.mc-caption a { color:#060; } /* ------ built-in navigation bullets wrapper that is relative to the #slider ------*/ #slider div.navBulletsWrapper { display:none; } /* --------- Others ------- */ #slider div.loading { width:100%; height:100%; background:transparent url(loading.gif) no-repeat 50% 50%; filter: alpha(opacity=60); opacity:0.6; position:absolute; left:0; top:0; z-index:9; } #slider img, #slider>b, #slider a>b { position:absolute; border:none; display:none; } #slider div.sliderInner { overflow:hidden; -webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/ position:absolute; top:0; left:0; } #slider>a, #slider video, #slider audio {display:none;} /* -- thumbnails -- */ #thumbs { margin-left:10px; /*width:230px;*/ font:normal 11px/13px Arial; color:#666; } #thumbs .thumb { border:1px solid #CCC; border-top:1px solid #FFF; padding:11px 8px; background:#EEE; } #thumbs .thumb-on { background:#FFF; } #thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;} #thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;border-radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;} #thumbs .thumb-content {float:left;width:110px;padding-left:18px;} /* Captions in #thumbs .thumb-content */ #thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;} #thumbs .thumb-on .thumb-content p {color:#BB0000;}
Milo   10 years ago
6

Hi Milo,

Thank you very much for your response.  Would you mind looking at my code?

I was able to follow your post for the most part.  I believe that I failed to mention that to meet our needs I created a hybrid of Demo #2 and Demo #6.  I hope that this doesn't complicate things too badly.

I've almost got it where I want it.

Can you help me with this:

1. I would like the left thumb column, center slider, and right thumb column to stay flush with the top of the page at all times.

2. I would like the left and right thumb columns to be flush against the center slider and always stay that way regardless of screen size, browser, zoom in/out etc.

3. Assuming that this works, exactly which license do we need to purchase?  Looking at the purchase page, it was a bit confusing in the drop-down.  We want to ensure that we purchase the correct license once we get this tweaked.

Thanks again.  Your help is much appreciated.

Jason

Jason   10 years ago
-2

**Update** (couldn't edit last post)  Made some more tweaks to try to center and have thumbs hug the slider.  More problems:

Elements still move when zooming in and out, etc, instead of locking in place.

Also, update to code somehow broke something and now my videos will not play.

In addition, I would like the slider to be the exact same height as the left and right thumb columns.

Currently working only locally. Will purchase license once I know the kinks can be resolved.

Any help with code would be appreciated.

Jason
  10 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲