I am using jCarousel, specifically the Connected Carousels that you can see at https://sorgalla.com/jcarousel/examples/connected-carousels/. For an A/B testing experiment, I need to use two instances of the Connected Carousels. The first one works correctly. The second one does not. For the second instance, I click the thumbnail pictures and the big pictures do not change. I do not think the official documentation provides examples for having multiple Connected Carousels on a single page. Any hints about how to achieve it? What I have tried is to investigate how https://sorgalla.com/jcarousel/docs/reference/api.html#reload could be used. I was thinking about maybe incorporating this in my main JavaScript file:
$('.jcarousel').jcarousel('reload', {
animation: 'slow'
});
However, that is not fixing the problem for me. Any hints? Thank you.
UPDATE 1:
See the original code at https://github.com/jsor/jcarousel/blob/master/examples/connected-carousels/index.html. Now see what I am trying to do adding a second instance of the connected carousel:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Connected Carousels - jCarousel Examples</title>
<!-- Shared assets -->
<link rel="stylesheet" type="text/css" href="../_shared/css/style.css">
<!-- Example assets -->
<link rel="stylesheet" type="text/css" href="jcarousel.connected-carousels.css">
<script type="text/javascript" src="../../vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="jcarousel.connected-carousels.js"></script>
</head>
<body>
<div class="wrapper">
<h1>Connected Carousels</h1>
<p>This example shows how to connect two carousels together so that one carousels acts as a navigation for the other.</p>
<div class="connected-carousels">
<div class="stage">
<div class="carousel carousel-stage">
<ul>
<li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<p class="photo-credits">
Photos by Marc Wiegelmann
</p>
<span>‹</span>
<span>›</span>
</div>
<div class="navigation">
‹
›
<div class="carousel carousel-navigation">
<ul>
<li><img src="../_shared/img/img1_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img2_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img3_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img4_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img5_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img6_thumb.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>
<div class="connected-carousels">
<div class="stage">
<div class="carousel carousel-stage">
<ul>
<li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<p class="photo-credits">
Photos by Marc Wiegelmann
</p>
<span>‹</span>
<span>›</span>
</div>
<div class="navigation">
‹
›
<div class="carousel carousel-navigation">
<ul>
<li><img src="../_shared/img/img1_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img2_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img3_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img4_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img5_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img6_thumb.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
What happens is that the first row of thumbnails controls both big stage pictures, the one above and the one below. The second row of thumbnails does not work. You click on it and nothing happens:
UPDATE 2:
It seems to me that what I am trying to do is a basic and common thing that the jCarousel library should be able to handle easily. Nonetheless, I am not finding anything in the examples or documentation to achieve what I want and what I am considering is to modify https://github.com/jsor/jcarousel/blob/master/examples/connected-carousels/jcarousel.connected-carousels.js so that for example instead of only
// Setup the carousels. Adjust the options for both carousels here.
var carouselStage = $('.carousel-stage').jcarousel();
var carouselNavigation = $('.carousel-navigation').jcarousel();
I can have for something like this:
// Setup the carousels. Adjust the options for both carousels here.
var carouselStage = $('.carousel-stage').jcarousel();
var carouselNavigation = $('.carousel-navigation').jcarousel();
var carouselStage1 = $('.carousel-stage1').jcarousel();
var carouselNavigation1 = $('.carousel-navigation1').jcarousel();
What do you think about what I am planning to try (carouselStage1, carouselNavigation1, etc.)? I am not finding any other way to have both instances of jCarousel working correctly.
I made it work correctly by modifying all three files at https://github.com/jsor/jcarousel/tree/master/examples/connected-carousels. I am not sure if what I did was the most elegant solution and efficient solution, since as I mentioned in my question, from my point of view what I needed was a basic and common thing that the jCarousel library should be able to handle easily. Nonetheless, I tested my solution and it works correctly. Both jCarousels are now on the same page running correctly and independently from each other. See my solution:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Connected Carousels - jCarousel Examples</title>
<!-- Shared assets -->
<link rel="stylesheet" type="text/css" href="../_shared/css/style.css">
<!-- Example assets -->
<link rel="stylesheet" type="text/css" href="jcarousel.connected-carousels.css">
<script type="text/javascript" src="../../vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="jcarousel.connected-carousels.js"></script>
</head>
<body>
<div class="wrapper">
<h1>Connected Carousels</h1>
<p>This example shows how to connect two carousels together so that one carousels acts as a navigation for the other.</p>
<div class="connected-carousels">
<div class="stage">
<div class="carousel carousel-stage">
<ul>
<li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<p class="photo-credits">
Photos by Marc Wiegelmann
</p>
<span>‹</span>
<span>›</span>
</div>
<div class="navigation">
‹
›
<div class="carousel carousel-navigation">
<ul>
<li><img src="../_shared/img/img1_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img2_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img3_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img4_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img5_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img6_thumb.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>
<div class="connected-carousels">
<div class="stage">
<div class="carousel carousel-stage1">
<ul>
<li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<p class="photo-credits">
Photos by Marc Wiegelmann
</p>
<span>‹</span>
<span>›</span>
</div>
<div class="navigation">
‹
›
<div class="carousel carousel-navigation1">
<ul>
<li><img src="../_shared/img/img1_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img2_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img3_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img4_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img5_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img6_thumb.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
jcarousel.connected-carousels.css
/** Stage container **/
.connected-carousels .stage {
width: 620px;
margin: 20px auto;
position: relative;
}
.connected-carousels .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.connected-carousels .photo-credits a {
color: #fff;
}
/** Navigation container **/
.connected-carousels .navigation {
width: 260px;
margin: 20px auto;
position: relative;
}
/** Shared carousel styles **/
.connected-carousels .carousel {
overflow: hidden;
position: relative;
}
.connected-carousels .carousel ul {
width: 10000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.connected-carousels .carousel li {
float: left;
}
/** Stage carousel specific styles **/
.connected-carousels .carousel-stage {
height: 400px;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.connected-carousels .carousel-stage1 {
height: 400px;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
/** Navigation carousel specific styles **/
.connected-carousels .carousel-navigation {
height: 60px;
width: 240px;
background: #fff;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.connected-carousels .carousel-navigation1 {
height: 60px;
width: 240px;
background: #fff;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.connected-carousels .carousel-navigation li {
cursor: pointer;
}
.connected-carousels .carousel-navigation1 li {
cursor: pointer;
}
.connected-carousels .carousel-navigation li img {
display: block;
border: 5px solid #fff;
}
.connected-carousels .carousel-navigation1 li img {
display: block;
border: 5px solid #fff;
}
.connected-carousels .carousel-navigation li.active img {
border-color: #ccc;
}
.connected-carousels .carousel-navigation1 li.active img {
border-color: #ccc;
}
/** Stage carousel controls **/
.connected-carousels .prev-stage,
.connected-carousels .next-stage {
display: block;
position: absolute;
top: 0;
width: 305px;
height: 410px;
color: #fff;
}
.connected-carousels .prev-stage {
left: 0;
}
.connected-carousels .next-stage {
right: 0;
}
.connected-carousels .prev-stage.inactive,
.connected-carousels .next-stage.inactive {
display: none;
}
.connected-carousels .prev-stage span,
.connected-carousels .next-stage span {
display: none;
position: absolute;
top: 50%;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.connected-carousels .prev-stage span {
left: 20px;
}
.connected-carousels .next-stage span {
right: 20px;
}
.connected-carousels .prev-stage:hover span,
.connected-carousels .next-stage:hover span {
display: block;
}
/** Navigation carousel controls **/
.connected-carousels .prev-navigation,
.connected-carousels .next-navigation {
display: block;
position: absolute;
width: 30px;
height: 30px;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 16px/29px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.connected-carousels .prev-navigation {
left: -15px;
top: 22px;
text-indent: 6px;
}
.connected-carousels .next-navigation {
right: -15px;
top: 22px;
text-indent: 20px;
}
.connected-carousels .prev-navigation.inactive,
.connected-carousels .next-navigation.inactive {
opacity: .5;
cursor: default;
}
jcarousel.connected-carousels.js
(function($) {
// This is the connector function.
// It connects one item from the navigation carousel to one item from the
// stage carousel.
// The default behaviour is, to connect items with the same index from both
// carousels. This might _not_ work with circular carousels!
var connector = function(itemNavigation, carouselStage) {
return carouselStage.jcarousel('items').eq(itemNavigation.index());
};
$(function() {
// Setup the carousels. Adjust the options for both carousels here.
var carouselStage = $('.carousel-stage').jcarousel();
var carouselNavigation = $('.carousel-navigation').jcarousel();
var carouselStage1 = $('.carousel-stage1').jcarousel();
var carouselNavigation1 = $('.carousel-navigation1').jcarousel();
// We loop through the items of the navigation carousel and set it up
// as a control for an item from the stage carousel.
carouselNavigation.jcarousel('items').each(function() {
var item = $(this);
// This is where we actually connect to items.
var target = connector(item, carouselStage);
item
.on('jcarouselcontrol:active', function() {
carouselNavigation.jcarousel('scrollIntoView', this);
item.addClass('active');
})
.on('jcarouselcontrol:inactive', function() {
item.removeClass('active');
})
.jcarouselControl({
target: target,
carousel: carouselStage
});
});
carouselNavigation1.jcarousel('items').each(function() {
var item = $(this);
// This is where we actually connect to items.
var target = connector(item, carouselStage1);
item
.on('jcarouselcontrol:active', function() {
carouselNavigation1.jcarousel('scrollIntoView', this);
item.addClass('active');
})
.on('jcarouselcontrol:inactive', function() {
item.removeClass('active');
})
.jcarouselControl({
target: target,
carousel: carouselStage1
});
});
// Setup controls for the stage carousel
$('.prev-stage')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('.next-stage')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
// Setup controls for the navigation carousel
$('.prev-navigation')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('.next-navigation')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
});
})(jQuery);
Related
I am trying to get a jquery slider to work on my site.
I have not programmed it because I cannot, I'm just trying to use something that is there and works on the demo site. I have tried several ready to use jquery slideshow and sliders, without any success. I have now found the simplest one available, I think but cannot make this one work either although I think I have followed all the steps instructed..
The one I have now is from "http://responsiveslides.com/", all the files are on Github though:
https://github.com/viljamis/ResponsiveSlides.js
I have put this in my html <head>
<!-- Slideshow begin -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
$(function() {
$("#slider1").responsiveSlides({
auto: true,
speed: 500,
timeout: 4000
});
});
</script>
and this in my html
<div class="welcome section"><!-- welcome section begin -->
<img src="mobile/media/logo2s.jpg" alt="" style="display:block; margin-left:auto; margin-right:auto;">
<div id="wrapper">
<ul class="rslides" id="slider1">
<li><img src="mobile/media/p_0001.jpg" alt=""></li>
<li><img src="mobile/media/p_0002.jpg" alt=""></li>
<li><img src="mobile/media/p_0003.jpg" alt=""></li>
</ul>
</div>
</div><!-- welcome section end -->
The responsiveslides.min.js is on the server under directory js, which is in the same directory as my html. I have also added relevant CSS to my .css file, however the slider does not slide.
No transitions at all.
I don't think I have missed anything but obviously I have. Can anyone help?
Follow everything on the page.
You have this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
You need this (remember to change .jpg file names to 1, 2, etc.):
<ul class="rslides">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
And all the CSS:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
Just don't put an id; keep it as it was:
<script>
$(function() {
$(".rslider").responsiveSlides({
auto: true,
speed: 500,
timeout: 4000
});
});
Hope it works!
I have a <ul> that is displayed inline-block and I need it to have a arrow appear when the element is active, see screenshot:
And here is what I have currently:
I already have the functionality with activating the element on hover:
.coffee
$(".solutions-items li").hover ->
$(this).addClass("solutions-items-active").siblings().removeClass "solutions-items-active"
My .html
<div class="text-center">
<ul class="solutions-items">
<li class="solutions-items-active"><img class="home-solutions-icon" src="" alt="online shop"></li>
<li><img class="home-solutions-icon" src="" alt="mobile smartphone"></li>
<li><img class="home-solutions-icon" src="" alt="couch commerce tablet"></li>
<li><img class="home-solutions-icon" src="" alt="pos point of sale"></li>
<li><img class="home-solutions-icon" src="" alt="marketplace"></li>
<li><img class="home-solutions-icon" src="" alt="wearables"></li>
<li><img class="home-solutions-icon" src="" alt="e-commerce innovations"></li>
</ul>
</div>
And here is my css:
.scss
.solutions-items li {
display: inline-block;
}
.home-solutions-icon {
height: 7em;
padding: 0.5em;
}
.solutions-items-active {
background: $green;
}
Any ideas how I can tackle this? Thanks !
You probably just want to add a bit of CSS to do that. If your image has a fixed size, there is a CSS trick to do that :
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
I want the above five different images joined as this is header part of a webpage.
I used the lavalamp plugin and it works, but the webpage loses its responsiveness. On different devices, the header is not displayed in one line.
I tried to insert it in bootstrap. I inserted the lines of code of lavalamp CSS in bootstrap CSS file, shown here:
.lavaLampWithImage {
margin-top:10px;
position: relative;
height: 55px;
/* width: 734px;*/
/*width:780px;*/
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url("res/arrow.png") no-repeat right -30px;
z-index: 0;
padding-top:59px;
padding-left:40px;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("res/arrow.png") no-repeat top left;
height: 30px;
}
.lavaLampWithImage li a {
z-index: 20;
display: block;
float: left;
position: relative;
overflow: hidden;
}
.mm {
border:0px;
}
#navbar {
/*margin-left:152px;*/
/*padding-top:60px;*/
padding-top:1px;
/*width:727px;*/
}
And the relevant HTML code part is as follows:
<div class="span6">
<div id="navbar">
<ul class="lavaLampWithImage" id="1">
<li><img class="mm" src="res/1.png" width="300" height="60" alt="home" onClick="location.href='index.html'"/></li>
<li class="current"><img class="mm" src="res/Home-n.png" width="120" height="60" alt="home" onClick="location.href='index.html'"/></li>
<li><img class="mm" src="res/blog.png" width="120" height="60" alt="contact us" onClick="location.href='http://eywaz.com/sit2/'"/></li>
<li><img class="mm" src="res/Help-n.png" width="120" height="60" alt="about us" onClick="location.href='help.html'"/></li>
<li><img class="mm" src="res/Contact_us-n.png" width="120" height="60" alt="contact us" onClick="location.href='contactus.html'"/></li>
</ul>
</div>
<div class="clear"></div>
</div>
How to make it responsive?
Please reply as early as possible.
Thanks in advance.
First remove specific width and height from your image tag like bellow :
<li><img class="mm" src="res/Home-n.png" alt="home" onClick="location.href='index.html'"/></li>
Then write in css :
#media only screen and (max-width:720px){
.lavaLampWithImage li img {
max-width:100%;
}
}
and give a specific width of li element in percentage in this media query.
I am not 100% sure what you mean with responsive images. But if you just want to resize the images according to the screen width, you could try something like this:
.lavaLampWithImage {
margin:10px 0 0;
padding:0;
display:block;
position: relative;
width:100%;
}
.lavaLampWithImage li {
display:inline-block;
list-style: none;
background-color:green;
width:15.38%;
}
.lavaLampWithImage li:first-child {
width:38.45%;
}
.lavaLampWithImage li a, .lavaLampWithImage li a img {
display:block;
width:100%;
}
and the html:
<div class="span6">
<div id="navbar">
<ul class="lavaLampWithImage" id="nav1">
<li><img class="mm" src="http://www.upsdell.com/BrowserNews/img/ban_300x60.png" alt="home" onClick="location.href='index.html'"/></li><li class="current"><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="home" onClick="location.href='index.html'"/></li><li><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="contact us" onClick="location.href='http://eywaz.com/sit2/'"/></li><li><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="about us" onClick="location.href='help.html'"/></li><li><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="contact us" onClick="location.href='contactus.html'"/></li>
</ul>
</div>
<div class="clear"></div>
</div>
here is a jsfiddle
I have, after many tutorials and lots of time, managed to build a slider with jQuery. However, it's not working as smoothly as I would have hoped. I have used a custom handle, and seeing as the new jQueryUI doesn't have a handle option, I have created a handle in CSS. However, this handle is going beyond the required bounds of the slider. I have uploaded a test page which can be found here.
My code is as follows:
CSS
<style type="text/css" media="screen">
<!--
body {
padding: 0;
font: 1em "Trebuchet MS", verdana, arial, sans-serif;
font-size: 100%;
background-color: #212121;
margin: 0;
}
h1 {
margin-bottom: 2px;
}
#container {
background-color: #fff;
width: 580px;
margin: 15px auto;
padding: 50px;
}
/* slider specific CSS */
.sliderGallery {
background: url(productbrowser_background_20070622.jpg) no-repeat;
overflow: hidden;
position: relative;
padding: 10px;
height: 160px;
width: 560px;
}
.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
.sliderGallery UL LI {
display: inline;
}
.slider {
width: 542px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
background: url(productbrowser_scrollbar_20070622.png) no-repeat;
}
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
.ui-slider-handle {
position: absolute;
cursor: default;
height: 17px;
top: 0;
background: url(productbrowser_scroller_20080115.png) no-repeat;
z-index: 100;
}
.slider span {
color: #bbb;
font-size: 80%;
cursor: pointer;
position: absolute;
z-index: 110;
}
.slider .slider-lbl1 {
left: 50px;
}
.slider .slider-lbl2 {
left: 220px;
}
.slider .slider-lbl3 {
left: 156px;
}
.slider .slider-lbl4 {
left: 280px;
}
.slider .slider-lbl5 {
left: 455px;
}
-->
</style>
jQuery
<script src="jqueryui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var container = $('div.sliderGallery');
var ul = $('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth() + 50;
$('.handle', container).slider({
min: -50,
max: itemsWidth,
stop: function (event, ui) {
ul.animate({'left' : ui.value * -1}, 500);
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</script>
Body
<div id="container">
<div class="sliderGallery">
<ul>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
</ul>
<div class="slider ui-slider">
<div class="handle"></div>
<span class="slider-lbl1">Our Books</span>
<span class="slider-lbl2">Other Books</span>
</div>
</div>
</div>
What I'd like to know is if there is any way to force the slider bar to stay inside the image behind it? The test link will let you understand what I mean if I didn't explain myself clearly.
Thanks in advance,
Dronnoc
The problem is coming from the fact that your handle is set to go outside of it's container.
The two problems are coming from the following
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
The second line says that the slider is allowed to go 90px before the left of it's initial container (hence the left overflow)
And when setting the left of the handle to 100%, it means that it will overflow on the right from 90px (180-90).
The way I would handle that would be to drop the margin-left:-90px;, to reduce the width of the scrolling div by 180px and to use another div to display the scroll bar image (positioned under your sliding div, but wider).
Something like:
.slider {
width: 362px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
}
.ui-slider .ui-slider-handle {
width:180px;
}
.sliderImg{
background: url(productbrowser_scrollbar_20070622.png) no-repeat;
/*add css to position it correctly here*/
}
EDIT: To answer to your comment, the following correction to the CSS on your page should make that work:
.slider {
/*let the rest as is*/
margin-left: 90px;
}
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
This combination will let it with the same boundaries (-90 + 90 = 0 ) but are going to make it move nicely.
EDIT2:
TO enable the click on the handle, you'll need to specify a height to your handle (otherwise you wouldn't be able to click on it). However this will move your span under the sliding div, to overcome it you'll have to specify their top position (as you already have them in absolute it's easy ;) ).
The following should do.
.handle {
height: 100%;
}
.slider span {
/*let the rest as is*/
top: 0;
}
To make that work above the span, you'll need to change your html a bit like that:
<div class="handle">
<span id="slider-tags" class="slider-lbl1">Our Books</span>
<span id="slider-tags" class="slider-lbl2">Other Books</span>
</div>
I have looked at the very helpful suggestions for the css for handling a bunch of exactly overlapping transparent images placed on a non-transparent image (in my case, a map but not a google-type map, just a line drawing). Could someone help me with turning that into a slideshow? I want to progressively stack images directly on top of each other so that the user sees an accumulation of visual information.
Here's a very simplified implementation: http://jsfiddle.net/r7B4n/
JavaScript:
$('#showNext').click(function(e){
e.stopPropagation();
$('#slideShow li:hidden:first').fadeIn();
});
CSS:
#slideShow {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #444;
list-style: none;
margin: 0;
padding: 0;
background: url(http://dummyimage.com/300x200/ccc/fff)
}
#slideShow li {
position: absolute;
left: 0; top: 0;
display: none
}
HTML:
<ul id="slideShow">
<li><img src="http://i.stack.imgur.com/hCTLO.png" /></li>
<li><img src="http://i.stack.imgur.com/Zm25l.png" /></li>
<li><img src="http://i.stack.imgur.com/3Rtc5.png" /></li>
<li><img src="http://i.stack.imgur.com/cg3MF.png" /></li>
</ul>
Show next image