BxSlider with Thumbnails - Thumbnails dont slide along with the slider - javascript

I'm trying to fix a thumbnail BxSlider to work properly. I'm struggling with those:
1) When clicking on a thumbnail image the thumbnail slider has to slide along with the main slider.
2) And also making the main slider dragable. In order to change slides with the mouse.
3) The thumbnail arrows dont move the slides.
I've made an JSFIDDLE for you to see
And this is my my js code:
$(function() {
var initThumbnailsSlider = function(object) {
var $bxSlider = $(object);
if ($bxSlider.length < 1) {
return;
}
$bxSlider.bxSlider({
controls: false,
pagerCustom: '#bx-pager',
easing: 'easeInOutQuint',
infiniteLoop: true,
speed: 500
});
$('.bx-custom-pager').bxSlider({
mode: 'horizontal',
maxSlides: 4,
minSlides: 2,
slideWidth: 156,
slideMargin: 25,
easing: 'easeInOutQuint',
controls: true,
nextText: "<i class='icm icm-Arrow_right'></i>",
prevText: "<i class='icm icm-Arrow_left'></i>",
pager: false,
moveSlides: 1,
infiniteLoop: false,
speed: 500,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
bx.goToSlide(idx);
}
};
// execute the function
initThumbnailsSlider('[data-bx-slider]');
});
Thanks a lot.
============================================
I've made a little search and i updated my JSFIDDLE
And I changed that part of my js code:
But sometimes it freezes :/
$bxPager.bxSlider({
mode: 'horizontal',
maxSlides: 4,
minSlides: 2,
slideWidth: 156,
slideMargin: 25,
easing: 'easeInOutQuint',
controls: true,
pager: false,
moveSlides: 1,
speed: 500,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
$bxSlider.goToSlide(idx);
}

I've used BxSlider before and haven't tried the slider you want to achieve. However, If you won't mind, I suggest that you try Slick. Below is a sample code that perfectly achieve what you want for your slide with lesser blocks of codes.
$('.product-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.custom-pager'
});
$('.custom-pager').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.product-slider',
dots: false,
centerMode: true,
focusOnSelect: true
});
.custom-pager .img-container {
width: 167px;
height: 165px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
.product-slider .img-container {
height: 525px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
.slide a{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<ul class="bxslider product-slider">
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
</div>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f8f8f8; background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
</div>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
</div>
</li>
<!-- li :end -->
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://www.legendarypokemon.net/images/xy/megavenusaur.jpg')">
</div>
</li>
<!-- li :end -->
</ul>
<ul id="bx-pager" class="custom-pager">
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="0">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
</div>
</a>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="1">
<div class="img-container" style="background-color: #f8f8f8; background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
</div>
</a>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="2">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
</div>
</a>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="3">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://www.legendarypokemon.net/images/xy/megavenusaur.jpg')">
</div>
</a>
</li>
<!-- li : end -->
</ul>

UPDATE
Since the original code is closer to what you wanted, but IMO not as good as the newer version, I figured I'll add it here:
Every click on an arrow advances both sliders in the same direction.
Every 6 clicks in one direction will cause the top slider to return to the same slide as the second slider's middle slide.
A click on one of the second slider's slide will make the first slider jump to the corresponding slide.
For some reason, the stack snippet is having DNS issues, so take a look at the
PLUNKER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SO35203571-38778710</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" />
<style>
#bx-pager {
left: 25px;
}
.bx-wrapper a.active {
border: 2px solid red;
}
.bx-controls-direction a {
top: -100% !important;
}
}
</style>
</head>
<body>
<ul class="bxslider">
<li>
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/me_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/houses.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/tree_root.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/trees.jpg" />
</li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href="">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" width="100" />
</a>
<a data-slide-index="1" href="">
<img src="http://bxslider.com/images/730_200/me_trees.jpg" width="100" />
</a>
<a data-slide-index="2" href="">
<img src="http://bxslider.com/images/730_200/houses.jpg" width="100" />
</a>
<a data-slide-index="3" href="">
<img src="http://bxslider.com/images/730_200/tree_root.jpg" width="100" />
</a>
<a data-slide-index="4" href="">
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" width="100" />
</a>
<a data-slide-index="5" href="">
<img src="http://bxslider.com/images/730_200/trees.jpg" width="100" />
</a>
</div>
<script src="http://cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script>
$(function() {
var bx = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
var cx = $('#bx-pager').bxSlider({
mode: 'horizontal',
maxSlides: 3,
minSlides: 3,
moveSlides: 1,
slideWidth: 275,
slideMargin: 40,
pager: false,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
bx.goToSlide(idx);
}
});
</script>
</body>
</html>
When I wrote that, my intentions was to sync both sliders, but what I didn't know back then is that when using a carousel and using a variable range on min/maxSlides option gets really messy. bxSlider will clone slides in order to cover any inconsistencies like having an odd number of slides on an infiniteLoop while a resize occurs. That's a ton of calculations and memory, hence bxSlider freezing up, or ending up with slides only clearing halfway past the edge are common occurrences.
I've refactored it then added your Pokemon theme and Bootstrap to my original Fiddle. There are a number of changes but I'll try to keep it brief:
Using the advanced easing options like: easing:'ease-in-out' requires:
useCSS: true (default)
jQuery Easing script loaded. So this should be added after the jquery.bxslider.min.js <script> tag:
<script src="https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js"></script>
Btw 'easeInOutQuint' isn't a value available with easing option, it's now `easing:'ease-in-out'. I have no idea why I added it in the first place.
The thumbnail slider .bx-pager is now immobilized for 2 good reasons:
The design of thumbnail navigation (or any navigation for that matter), should be presented in it's full capacity.
The extra coordination involved in syncing a slider that presents one slide (i.e. .bxslider) and a slider that presents 4 slides (i.e. .bx-pager) becomes problematic.
instantiate bxSlider in an expression:
var bx = $('.bxslider').bxSlider();
This makes using methods easier:
bx.goToSlide()
Removed all controls since .bx-pager is more than sufficient.
Tricked out thumbnails:
Used PNGs with a transparent background.
Added a simple function that toggles a class .on to the active thumbnail (i.e. .imgThumb.on}
This .on class employs transform, position, z-index, and transition CSS properties to animate.
If you resize the width smaller, you'll see the thumbnails layer on top of each other. That's a nice effect possible by using transparent background and avoiding cropping. So the background-size: cover which crops images is changed to background-size: contain which proportionally stretches the image to an element's edges without cropping.
Here's the demo. Good luck, sir.
FIDDLE

Related

Jquery animate a div character in a game

I am trying to experiment with Jquery by writing a small game where i am using html div's as game character, so i have this div with id bullet attach to another div with id player, so i have bind on click action to body so that when user click any part of the page body the player fires the button and i am using the Jquery animate method to do that and it works fine except the bullet goes and remain at the top of the page, whereas i want a case where player can fire many bullets at the same time so how can i achieve this. I do not want my bullet div to go and stick at the top.
app.js file
//Control mouse movement and bullet movement
$(document).ready(function(){
$('body').mousemove(function(event){
var msg = 'Handler for mouse called at'
//moves bullet to current mouse position and player position
$('#bullet').css({'left':event.pageX})
//moves player to the current mouse postion
$('#player').css({'left':event.pageX})
})
})
//Fires bullet
$('body').click(function(){
$('#bullet').animate({'bottom':'500px'})
})
Here is a sample that returns the bullet to the player after it reaches the top. It uses the done option of animate() and this answer to return the bullet.
It is important when the animation is done not to remove the entire style attribute with $("#bullet").removeAttr("style") or similar because that would remove the x-coordinate and place the bullet off to the left until the mouse moves again.
//Control mouse movement and bullet movement
$(document).ready(function() {
$('body').mousemove(function(event) {
var msg = 'Handler for mouse called at'
//moves bullet to current mouse position and player position
$('#bullet').css({
'left': event.pageX
})
//moves player to the current mouse postion
$('#player').css({
'left': event.pageX
})
})
})
//Fires bullet
$('body').click(function() {
$('#bullet').animate({
'bottom': '500px'
}, {
done: function() {
$('#bullet').attr('style', function(i, style) {
return style && style.replace(/bottom[^;]+;?/g, '');
});
}
});
});
#player {
height: 50px;
width: 50px;
background-color: red;
position: relative;
}
#bullet {
margin-top: 550px;
height: 25px;
width: 15px;
position: relative;
margin-left: 18px;
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="blue lighten-4" id="body">
<div class="orange darken-1" id="bullet">
</div>
<div class="" id="player">
</div>
<footer class="page-footer green lighten-1" id="footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<!-- <h5 class="green-text lighten-1">Footer Content</h5>
<p class="green-text lighten-1">You can use rows and columns here to organize your footer content.</p> -->
</div>
<div class="col l4 offset-l2 s12">
<!-- <h5 class="white-text">Links</h5>-->
<ul>
<!-- <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li> -->
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<!-- © 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a> -->
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

jQuery plugin slick is not working

I downloaded the jQuery files to create image sliders for my Website, but it's not working at all. Can somebody teach me which codes I have problems? thank you..
<body>
<ul class="slider" "position: relative; top: 0px; left: 0px; width: 600px;
height: 300px;">
<li><div class="slick"><img src="./images/sample-01.png"></div></li>
<li><div class=""><img src="./images/sample-02.png" /></div></li>
<li><div class="slick"><img src="./images/sample-03.png" /></div></li>
<li> <div class="slick"><img src="./images/sample-01.png" /></div>
<li> <div class="slick"><img src="./images/sample-02.png" /></div></li>
<li><div class="slick"><img src="./images/sample-03.png" /></div></li>
</ul>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script src="jquery-migrate-1.2.1.min.js"></script>
<script src="slick.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($){
var_slideshowTransitions = [
{$Duration:1200,$Opacity:2}
];
var options={
$SlideDuration:500,
$AutoPlay:true,
$DragOrientation:3,
$Idle:1500,
$slideshowOptions: {
$Class:$JssorslideshowRunner$,
$Transitions:_slideshowTransitions,
$TransitionsOrder:1,
$ShowLink: true
}
};
var slider= new $Slider$("slider", options);
});
</script>
First off, your HTML is poorly structured and invalid. You didn't close your 4th <li> element, also, in the <ul> element, you have to use the style attribute to apply styles inline. In your case, like this: <ul class="slider" style="position: relative; top: 0px; left: 0px; width: 600px;height: 300px;">.
I have no idea where you got that Javascript code from but the slickJS documentation is pretty simple to follow.
My code below implements a slideshow which you can copy, paste and modify, if you like. Look into the docs. You can set or change a ton of options to help get your slider to do what you want. Also, make sure you are importing everything in the correct order. jQuery -> slickjs -> custom Javascript. Make sure the slick CSS is linked in the head.
$(document).ready(function (){
$('.slider').slick({
dots:true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
/*
modify the slider container with your own custom CSS
to have it fit or placed in your page how you want.
*/
.slider {
width:70%;
margin:0 auto;
}
/*
I put divs inside that can have their padding modified
so the images aren't directly up against each other.
Feel free to play with this CSS to desired affect.
*/
.slide-image-container {
padding:2%;
}
/*
This CSS forces the inner images to size to the parent (slide) container
*/
.slide-image-container img {
width:100%;
}
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
</div>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>

Fancybox using multiple galleries on same page

I have a current Fancybox set up to display a youtube video or a gallery slideshow. Each is initiated by clicking on a play button (html object) containing the following links:
youtube:
<a class="youtube shadowborder" href="#youtubeDiv"><img src="$thisfolderurl$youtubePlay.png" border="0"></a>
gallery1:
<a class="fancyboxLauncher shadowborder" href="#SSGalleryDiv"><img src="$thisfolderurl$youtubePlay.png" border="0"></a>
gallery2:
<a class="fancyboxLauncher shadowborder" href="#SSHeidiDiv"><img src="$thisfolderurl$youtubePlay.png" border="0"></a>
The HTML in body is:
<div class='hidden'>
<div id="youtubeDiv">
<iframe width="853" height="480" src="https://www.youtube.com/embed/uF1qDNyg4Lw?rel=0&fs=1&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="SSGalleryDiv" class='hidden'>
<a class="fancybox" href="$thisfolderurl$slider1_b.JPG" title="Pups have all gone to their new homes."></a>
<a class="fancybox" href="$thisfolderurl$slider2_b.JPG" title=""></a>
<a class="fancybox" href="$thisfolderurl$slider3_b.JPG" title=""></a>
</div>
<div id="SSHeidiDiv" class='hidden'>
<a class="fancybox" href="$thisfolderurl$Heidi1.jpg" title="Pups have all gone to their new homes."></a>
<a class="fancybox" href="$thisfolderurl$Heidi2.jpg" title=""></a>
<a class="fancybox" href="$thisfolderurl$Heidi3.jpg" title=""></a>
</div>
Code in head is:
<!-- Add jQuery library -->
<script type="text/javascript" src="$thisfolderurl$jquery_1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="$thisfolderurl$jquery.mousewheel_3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="$thisfolderurl$jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="$thisfolderurl$jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="$thisfolderurl$jquery.fancybox_buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox_buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="$thisfolderurl$jquery.fancybox_thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox_thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="$thisfolderurl$jquery.fancybox_media.js?v=1.0.6"></script>
<style type="text/css">
.hidden {
display: none;
}
a.shadowborder img,a.shadowborder:link,a.shadowborder:visited {
float: left;
border: none;}
a.shadowborder:hover{
border:2px solid white;
border-radius: 14px;
-webkit-box-shadow: 0 0 12px white;
box-shadow: 0 0 12px white;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyboxLauncher").on("click", function(){
$(".fancybox").eq(0).trigger("click");
return false;
});
// fancybox for youtube
$(".youtube").fancybox({
padding: 0,
openEffect: 'elastic',
openSpeed: 250,
closeEffect: 'elastic',
closeSpeed: 150,
closeClick: true,
closeBtn: true,
helpers: {
overlay: {
opacity: 0.4,
css: {
'background': '#50a382'
}
}
}
});
// fancybox for images
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0,
autoPlay: 'true',
playSpeed: 4000,
closeBtn: true,
arrows:true,
helpers: {
overlay: {
opacity: 0.4,
css: {
'background': '#50a3e2'
}
}
}
});
}); // ready
</script>
I am using V2. Now that I have added the 2nd gallery div (SSHeidiDiv) the slideshow goes through all the images in both galleries instead of just the images associated with that div. I have tried many solutions offered but can't get them to work so decided to ask for help here.
The other issue I came upon is relating to the youtube video. I set it to autoplay, which is fine for the current video but when I tested the same code using a video that had sound I discovered the video was playing in the background, i.e. you could hear the sound but the video was suppressed, no doubt by the hidden div. Have not been able to find a cure short of removing autoplay.
Any help you can offer would be appreciated.
Finally found a way to resolve my issues. The code in "head" is now
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-trigger").click(function() {
$("a[rel='" + $(this).data('trigger-rel') + "']").eq(0).trigger('click');
return false;
});
// fancybox for youtube
$(".youtube").fancybox({
padding: 0,
openEffect: 'elastic',
openSpeed: 250,
closeEffect: 'elastic',
closeSpeed: 150,
closeClick: true,
closeBtn: true,
helpers: {
overlay: {
opacity: 0.4,
css: {
'background': '#50a382'
}
}
}
});
// fancybox for images
$(".fancybox").fancybox({
padding : 0,
autoPlay: 'true',
playSpeed: 4000,
closeBtn: true,
arrows:true,
helpers: {
overlay: {
opacity: 0.4,
css: {
'background': '#50a3e2'
}
}
}
});
}); // ready
</script>
The html is now
<div id='wrap'>
<div id="youtubeDiv" class='hidden'>
<iframe width="853" height="480" src="https://www.youtube.com/embed/uF1qDNyg4Lw?rel=0&fs=1&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="fancyDiv" class='hidden'>
<a rel="gallery" class="fancybox" href="$thisfolderurl$slider1_b.JPG" title="Pups have all gone to their new homes."></a>
<a rel="gallery" class="fancybox" href="$thisfolderurl$slider2_b.JPG" title=""></a>
<a rel="gallery" class="fancybox" href="$thisfolderurl$slider3_b.JPG" title=""></a>
<a rel="gallery1" class="fancybox" href="$thisfolderurl$Heidi1.jpg" title="Pups have all gone to their new homes."></a>
<a rel="gallery1" class="fancybox" href="$thisfolderurl$Heidi2.jpg" title=""></a>
<a rel="gallery1" class="fancybox" href="$thisfolderurl$Heidi3.jpg" title=""></a>
</div>
</div>
The link code attached to my play button image for gallery1 is now
<a data-trigger-rel="gallery1" class="fancybox-trigger shadowborder" href="#fancyDiv"><img src="$thisfolderurl$youtubeGroup2Play.png" border="0"></a>
and my link code for gallery is
<a data-trigger-rel="gallery" class="fancybox-trigger shadowborder" href="#fancyDiv"><img src="$thisfolderurl$youtubeGroup2Play.png" border="0"></a>
Works well and I am so relieved it has finally come together. Many thanks to the clues given in the many fiddles I examined and tested.

Using flexslider to create a responsive, full width, fixed-height, carousel image-slider

I'm trying to create a full width, fixed-height, carousel image-slider for the home page of a website that I'm working on.
That is, where the images are scaled to a fixed-height (matching the carousel height (the width doesn't matter)) which scales responsively as the page itself does.
However, I want my slider to be of lighter weight/ greater simplicity.
Here is my code thus far:
(here is the head)
<head>
<!-- Flex Slider API JS -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 360,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
<!-- End of FlexsliderAPI JS -->
</head>
Here is the body:
<body>
<!-- Placement of Flex Slider -->
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="../../local/images/slide1.JPG" />
</li>
<li>
<img src="../../local/images/slide2.JPG"/>
</li>
<li>
<img src="../../local/images/slide3.JPG" />
</li>
<li>
<img src="../../local/images/slide 5.jpg" />
</li>
</ul>
</div>
</div>
<!-- End placement of FlexSlider -->
</body>
And here is the CSS:
.flex-container {
width: 100%;
height: 300px;
}
background-color: red;
.flex-container ul {
margin: 0px;
padding: 0px;
}
.flex-container li {
list-style: outside none none;
display: inline;
}
.flexslider .slides img {
width: inherit;
max-height: inherit;
}
Thanks a ton for the help. - Cody
not snapping to height bounds
I don't see anything in flexslider that does anything with the height. Make sure all the elements are the same height, either by creating similarly sized thumbnails or enforcing a height with CSS. You might need to remove the itemWidth configuration to avoid stretching.
not displaying navigation
Your HTML is missing the navigation elements. I think you need to configure it; pass the navigation options:
controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next",
The configuration offercard uses is:
slideshowSpeed:7000,
animation:'slide',
controlNav:true,
directionNav:true,
pauseOnHover:true,
direction:'horizontal',
reverse:false,
animationSpeed:2000,
prevText:"< PREV",
nextText:"NEXT >",
easing:"linear",
slideshow:true,
itemWidth:800,
minItems:1,
itemMargin:0

Content Slider - issue with JQuery

I am trying to use the demo from this site : http://slidesjs.com/#overview
and try to implement two slider on a page. I am customising the Linking demo.
As i am using two different slider : slider1 and slider2 with different css so I used global.css for slider-1 and created text.css for slider-2. i noticed that the js: slides.min.jquery.js file uses the 'css' element like slides_container, next, prev so i created another js :slider.text.jquery.js replacing the css content by: slides_containerT, nextT, prevT as per text.css. but the code is not working. please help me as my project is due next monday.
Please help to resolve the isse and let me know if more detail is required.
Sorry I tried to add the html, css and jquery code but i was encountering error.
Can you please suggest how what changes I should make to the js : slides.min.jquery.js
so that it renders my second slider with css content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="css/new.css">
<link rel="stylesheet" href="css/text.css">
<script src="js/slider/jquery.min.js"></script>
<script src="js/slider/slides.min.jquery.js"></script>
<script src="js/slider/slider.text.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides 1
$('#slides1').slides({
preload: true,
preloadImage: 'img/slider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
// Initialize Slides 2
$('#slides2').slides({
preload: true,
preloadImage: 'img/slider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
</script>
<div id="container">
<div id="example">
<div id="slides1">
<div class="slides_container">
<div class="slide">
<img src="img/slider/slide-1.jpg" height="150" style="max-width: 200px" alt="Slide">
<div class="tmpSlideCopy">
<h1>A History of Innovation</h1>
<p>SLIDE 1 </p>
</div>
</div>
<div class="slide">
<img src="img/slider/slide-2.jpg" height="150" style="max-width: 230px" alt="Slide">
<div class="tmpSlideCopy">
<h1>Second Slide</h1>
<p>Slide 2</p>
</div>
</div>
<div class="slide">
<img src="img/slider/slide-3.jpg" height="150" style="max-width: 230px" alt="Slide">
<div class="tmpSlideCopy">
<h1>Third Slide</h1>
<p>Slide 3</p>
</div>
</div>
</div>
<img src="img/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
<img src="img/slider/arrow-next.png" width="24" height="43" alt="Arrow Next">
cheers
pam
You can try this below code.
$(function(){
$("#slides").slides({
container: 'slides_container'
});
});
Where container is the "css" style.
.slides_container {
width:570px;
height:270px;
}
More information on various property and styling at http://slidesjs.com/#docs

Categories

Resources