Is it possible to create a gallery slideshow feature where the selected thumbnail's image source will be displayed in the main image container?
I believe I can implement that part successfully. Currently, my challenge is defining the thumbnail scrolling area - I want it to display thumbnails and not empty spaces.
Below is the jQuery code:
function thumbs_slide(){
var more_thumbs = jQuery('.more-thumbs');
var less_thumbs = jQuery('.less-thumbs');
var thumbnails = jQuery('.thumb-outer-container .thumbnails');
var more_scroll = '-100%';
var less_scroll = '100%';
var out_scroll = thumbnails.css('top');
more_thumbs.hover(function(){
thumbnails.css('top',more_scroll)
},function(){
out_scroll = thumbnails.css('top');
thumbnails.css('top',out_scroll);
})
less_thumbs.hover(function(){
thumbnails.css('top',less_scroll);
},function(){
out_scroll = thumbnails.css('top');
thumbnails.css('top',out_scroll);
})
}
thumbs_slide();
CSS Style:
.single-product .load .images .thumb-outer-container {
float: right;
width: 20%;
max-width: 200px;
overflow: hidden;
position: relative;
border: 1px solid #d1d1d1;
.thumb-outer-container .thumbnails {
-moz-transition: all 5s ease-in-out;
-ms-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
-webkit-transition: all 5s ease-in-out;
transition: all 5s ease-in-out;
}
.thumb-outer-container .more-thumbs,
.thumb-outer-container .less-thumbs {
opacity: .85;
position: absolute;
z-index: 99;
right: 0;
left: 0;
height: 50%;
text-align: center;
cursor: pointer;
-moz-transition: all .05s ease-in-out;
-ms-transition: all .05s ease-in-out;
-o-transition: all .05s ease-in-out;
-webkit-transition: all .05s ease-in-out;
transition: all .05s ease-in-out;
}
.more-thumbs {
top: 0;
}
.more-thumbs::after {
content: '\f077';
font-family: FontAwesome;
position: absolute;
top: 0;
right: 0;
left: 0;
border-bottom: 1px solid currentColor;
background-color: rgba(249,249,249,.95);
color: rgba(0,174,239,1);
}
.less-thumbs {
bottom: 0;
}
.less-thumbs::after {
content: '\f078';
font-family: FontAwesome;
position: absolute;
right: 0;
bottom: 0;
left: 0;
border-top: 1px solid currentColor;
background-color: rgba(249,249,249,.95);
color: rgba(0,174,239,1);
}
.thumb-outer-container .more-thumbs:hover,
.thumb-outer-container .more-thumbs:focus,
.thumb-outer-container .less-thumbs:hover,
.thumb-outer-container .less-thumbs:focus {
opacity: 1 !important;
}
.single-product .load .images img {
border: 0;
}
.single-product .load .images .thumbnails {
padding-top: 0 !important;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.single-product .load .images .thumbnails a {
margin: 0 0 1px !important;
padding: 0 !important;
border: 0;
float: left !important;
display: inline-block !important;
width: 100% !important;
max-width: 200px !important;
}
.single-product .load .images .thumbnails a:hover,
.single-product .load .images .thumbnails a:focus {
border-bottom: 0;
}
This is a WP site, I can provide more code if necessary. However, I believe the solution lies within my jQuery script.
Check out the sample link: -> gallery tab
Thank you, Matt