i'm using ResponsiveSlides to make a slide of some pictures, but i have some issues.
First of all, automatic slide after a timeout doesn't work..
But my first problem is that i can't see the pager under the pictures, though i've enabled it! The pager is this: http://i.imgur.com/cCV4AOP.png (the number of the picture under the slide)
Sorry for my english and sorry i'm a noob on js & css..
This is my html code:
Head:
<script src="js/responsiveslides.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$("#slider").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540,
});
});
</script>
Css:
/*! http://responsiveslides.com v1.54 by #viljamis */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 90%;
padding: 0;
margin: 55px;
top: -50px;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 90%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 90%;
border: 0;
}
Slider on my html page:
<ul class="rslides" id="slider">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
</ul>
Why i dont see the pager?
I haven't figured out why yet but if you switch the order in which you reference your external scripts, it fixes the issue.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
The page links are unformatted "ul > li > a" so to get the appearance of the ResponsiveSlides website, you need to add your own CSS or modify theirs.
Related
I'm a complete beginner at coding and I've already searched here but I couldn't really find a proper solution to my problem.
I'm trying to get a text to appear in place of the image when I hover over the image with the mouse.
Unfortunately jQuery has to be used, I know it can be done by just using CSS.
So far I have the following which I found on here:
In the head:
<script>
$(function(){
$('.parent').mouseenter(function(){
$(this).children('.child').fadeIn();
}).mouseleave(function(){
$(this).children('.child').fadeOut();
});
});
</script>
In the body:
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
CSS:
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
padding:10px;
display:none;
}
Thank you for an easy tip or explanation on what I'm doing wrong and how I can solve that problem.
Edit:
This is my full code in my PHP file:
echo "
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Test Blog</title>
<script>
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
</script>
</head>
<body>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<div class=\"wrapper clearfix\">
<figure class=\"gallery-item\">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class=\"img-title\">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
And there it continues with a dropdown menu routing to the other pages.
The CSS code is in my CSS file which I linked to above (the link is correct since all the other CSS code is working).
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
.gallery {
width: 25em;
margin: 2em auto;
}
.gallery-item {
height: auto;
width: 48.618784527%;
float: left;
margin-bottom: 2em;
position: relative;
}
.gallery-item:first-child {
margin-right: 2.762430939%;
}
.gallery-item img {
width: 100%;
}
.gallery-item:hover .img-title {}
.img-title {
position: absolute;
top: 0;
margin: 0;
height: 100%;
width: 100%;
text-align: center;
display: none;
background-color: #333;
}
.img-title h5 {
position: absolute;
color: #fff;
top: 33%;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper clearfix">
<figure class="gallery-item">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class="img-title">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
You have to define the size of the overly - I did that with the position settings below. Also, I erased the opacity setting. Not sure what else you want, but basically it works now.
$(document).ready(function() {
$('.parent').mouseenter(function() {
$(this).children('.child').fadeIn();
}).mouseleave(function() {
$(this).children('.child').fadeOut();
});
});
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
padding: 10px;
display: none;
}
.child p {
color: white;
text-align: center;
margin-top: 100px;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image' />
<div class='child'>
<p>Random text.</p>
</div>
</div>
Hope it helps you out.
$(function(){
$('.parent').mouseenter(function(){
//alert();
$(this).children('.child').show().fadeIn(200);//have some timeout for fading in
}).mouseleave(function(){
$(this).children('.child').fadeOut(400);
});
});
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 1.0;
padding:10px;
display:none;
/*
add width and height attribute to the elem
*/
width:100%;
height:300px;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
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 the following jsfiddle but it doesnt seem to show the caption up:
http://jsfiddle.net/KumcX/189/
HTML:
<ul>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
</ul>
CSS:
ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;}
ul li div{display:none; background:white; opacity:.5; position:absolute;}
JS:
$('ul li').mouseenter(function(){
var image= $(this).find('a img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeIn();
}).mouseleave(function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeOut();
});
It should show the caption, but its not.. Any ideas?
You probably copy the html with firebug,
delete the styles on the li elements.
check this
http://jsfiddle.net/kuyabiye/KumcX/194/
Refactored some of the JS, ditched the inline caption styling, and updated the css class
jQuery
$(".caption").css('opacity', 0);
$('ul li').mouseenter(function() {
$(this).find(".caption").animate({ 'opacity': 0.9 });
}).mouseleave(function() {
$(this).find(".caption").animate({ 'opacity': 0 });
});
css
ul li {
float:left;
padding:20px;
border:solid gray 4px;
margin:5px;
}
.caption {
width: 220px;
background: #fff;
height: 150px;
position: absolute;
}
example: http://jsfiddle.net/hunter/KumcX/201/
Use animate effect, configuring opacity:
$('ul li').mouseenter(function(){
var image= $(this).find('a img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.animate({'opacity':0.5});
}).mouseleave(function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.animate({'opacity':0});
});
Just a couple of tweaks needed, first of all in your CSS you need to give your <div> a left and top position as well as some height and width which I've set to 100% to span the image and your <li> a position relative so the caption is nicely positioned over the image. Oh I also gave the <div> background an rgba color of 255,255,255,0.5 to achieve your transparent effect.
Your JS is fine but your problem in the fiddle is that you have lots of inline styles so delete those and everything should work ok from then on in.
Here's an updated fiddle: http://jsfiddle.net/KumcX/197/
And the updated CSS:
ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;position:relative}
ul li div{display:none; background:rgba(255,255,255,.5); position:absolute;left:0;top:0;width:100%;height:100%;}
Hope this helps.
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