Develop Reference

Cycle image caption doesn't work

I've cycle slideshow gallery and I put a caption on my images but there is something wrong why I don't understand..Only my attribute name showing on my caption I don't want to attribute name I want to get attribute value what's wrong with me ?
$(document).ready(function() {
$('.mySlideShow').cycle({
log: false,
fx: 'fade',
slides: ">a",
caption: '.cycle-caption',
captionTemplate: "{{data-caption}}",
pauseOnHover: true,
});
})
.slide-gallery {
position: relative;
width: 790px;
overflow: hidden;
height: 500px;
}
.slide-gallery img {
max-width: 100%;
height: 100%;
}
.cycle-caption {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8);
padding: 10px;
color: #FFF;
z-index: 1000;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="slide-gallery">
<div class="mySlideShow">
<a>
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-caption="Lorem ipsum dolor sit amet..">
</a>
<a>
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-caption="This is my caption....">
</a>
<a>
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-caption="bla.....">
</a>
</div>
<div class="cycle-caption"></div>
</div>

There were few bugs in the way you were defining your caption.
Mistake 1-
First of all the data-caption attribute in not supported to display caption . After reading the documentation despite of data-caption you can use data-cycle-title for the captions.
Mistake 2-
Since the selector is anchor tag slides: "> a" in your jquery code, the captions will work on anchor tag not on the < img > . So I have added the data-cycle-title="Lorem ipsum dolor sit amet.." on the anchors.
Also changes the captiontemplate jquery to this:
captionTemplate: "' {{cycleTitle}}'",
Below is the working example . Happy Coding :)
$(document).ready(function() {
$('.mySlideShow').cycle({
log: false,
fx: 'fade',
slides: "> a",
caption: '.cycle-caption',
captionTemplate: "' {{cycleTitle}}'",
pauseOnHover: true,
});
})
.slide-gallery {
position: relative;
width: 790px;
overflow: hidden;
height: 500px;
}
.slide-gallery img {
max-width: 100%;
height: 100%;
}
.cycle-caption {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8);
padding: 10px;
color: #FFF;
z-index: 1000;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="slide-gallery">
<div class="mySlideShow">
<a data-cycle-title="Lorem ipsum dolor sit amet..">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" >
</a>
<a data-cycle-title="This is my caption....">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" >
</a>
<a data-cycle-title="bla.....">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" >
</a>
</div>
<div class="cycle-caption"></div>
</div>

It seems that captionTemplate has to be set to an attribute of the top level element, the slide, in this case, the a element.
This seems to work.
$(document).ready(function() {
$('.mySlideShow').cycle({
log: false,
fx: 'fade',
slides: ">a",
caption: '.cycle-caption',
captionTemplate: "{{target}}",
pauseOnHover: true,
});
})
.slide-gallery {
position: relative;
width: 790px;
overflow: hidden;
height: 500px;
}
.slide-gallery img {
max-width: 100%;
height: 100%;
}
.cycle-caption {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8);
padding: 10px;
color: #FFF;
z-index: 1000;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="slide-gallery">
<div class="mySlideShow">
<a target="Lorem ipsum dolor sit amet..">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg">
</a>
<a target="This is my caption....">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg">
</a>
<a target="bla.....">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
</a>
</div>
<div class="cycle-caption"></div>
</div>
It doesn't seem to work with custom attributes, that is why I've used target. If you don't wrap your images in a elements, you could use the image's alt attribute, that will be more appropriate.

Infinite scrolling slideshow with inline-blocks?

So most probably there's only some of my code that is wrong. I've been trying for quite a few hours to get it right, so now I'm turning my faith to the loyal people of the interwebs! ;)
So what I'm trying to do is move the leftmost object in the container outside of the screen and then append to the last item in the container to make it seem like it's forever scrolling. As of right now I only have 3 elements to clearly see if it works. What am I doing wrong?
My html:
<section class="photo-grid-slideshow">
<div class="photo-crop">
<h3>I wanna
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza1.jpg');"></div>
</div>
<div class="photo-crop">
<h3>Dance
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza3.jpg');"></div>
</div>
<div class="photo-crop">
<h3>With you
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza2.png');"></div>
</div>
</section>
My css:
.photo-crop {
display: inline-block;
overflow: hidden;
float: left;
width: calc(100% / 3);
height: 100%;
line-height: 100%;
margin: 0;
margin-right: 0;
padding: 0;
display: inline-block;
position: relative;
left: 0;
right: 0;
background-position: center center;
background-size: cover;
transition: all 0.2s;
text-align: left;
}
.photo-grid-slideshow {
height: 300px;
display: inline-block;
min-width: 100%;
position: relative;
background: black;
padding: none;
overflow: hidden;
background: #444;
}
My javascript:
$(function () {
var timer = setInterval(function() {
$(".photo-crop:first-child").animate({marginLeft: '-=33vw'}, 2000, "linear", function() {
$('this').Css("margin-left", 0).appendTo('.photo-crop:last-child');
});
}, 2000);
});

Give this a shot:
$(function() {
var timer = setInterval(function() {
$(".photo-crop:first-child").animate({
marginLeft: '-=33vw'
}, 2000, "linear", function() {
$(this).css("margin-left", 0).appendTo('.photo-crop:last-child');
});
}, 2000);
});

jquery ui draggable when set containment draggable div jumping

I am trying to use jQuery-UI draggable which is working fine, but I have a strange behavior. When I am setting a containment, the draggable div jumps from one side to another. When I am disabling it, then I can smoothly drag the container.
$('.bJS_issueTeaser').draggable({
'cursor': 'move',
axis: "x",
containment: "parent"
});
.b_ct_issueTeaser {
width: 37.665rem;
overflow: hidden;
max-width: 100%;
margin-top: 60px;
position: relative;
min-height: 250px;
}
.bJS_issueTeaser {
width: 50.0745rem;
position: absolute;
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -0.67rem;
margin-right: -0.67rem;
}
.c_teaser {
width: 240px;
height: 100px;
padding-left: 0.67rem;
padding-right: 0.67rem;
}
.c_teaser-inner {
position: relative;
}
.c_description {
position: absolute;
bottom: 0;
width: 100%;
height: 2rem;
background: rgba(255, 255, 255, 0.5);
padding: 0.67rem 1.34rem;
}
.img-fluid {
display: block;
max-width: 100%;
height: auto;
}
<div class="b_ct_issueTeaser">
<div class="bJS_issueTeaser ui-draggable ui-draggable-handle">
<div class="row c_row">
<div class="c_teaser">
<div class="c_teaser-inner">
<img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
<div class="c_description">
<a class="b_is-unstyledLink" href="#">
<p>
Lorem ipsum
</p>
</a>
</div>
</div>
</div>
<div class="c_teaser">
<div class="c_teaser-inner">
<img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
<div class="c_description">
<a class="b_is-unstyledLink" href="#">
<p>
Lorem Ipsum
</p>
</a>
</div>
</div>
</div>
<div class="c_teaser c_teaser-right">
<div class="c_teaser-inner">
<img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
<div class="c_description">
<a class="b_is-unstyledLink" href="#">
<p>
Lorem ipsum
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
jsFiddle

Why the play stop pause buttons and progressBar are not displaying at all?

This is the jsfiddler for it the issue is with the big images i wanted to add the buttons play stop pause and the progressbar on the big images: JSFiddler
When i'm doing inspect element i don't see any errors in red.
I took the code of this jquery: Automatic slideshow with a timer, play-, pause-, previous- and next-
And before it i used the coolcarousels this jquery: Cool responsive image slider with thumbnail carousel
Cool responsive image slider
And this is the code i have now:
In the html file:
<!DOCTYPE html>
<!--
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="carousel.css">
<link rel="stylesheet" type="text/css" href="glow-effect.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.1.0/jquery.carouFredSel.packed.js" type="text/javascript"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<script src="java_script.js"></script>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.container {
background: rgb(170, 187, 97); /* Fallback */
background: rgba(170, 187, 97, 0.5);
}</style>
</head>
<body>
<div>TODO write content</div>
<div id="wrapper">
<div id="carousel-wrapper">
<img id="shadow" src="img/gui/carousel_shadow.png" />
<div id="inner">
<div id="carousel">
<span id="pixar"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" /></span>
<span id="bugs"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005712.Gif" /></span>
<span id="cars"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007337.Gif" /></span>
<span id="incred"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000009.Gif" /></span>
<span id="monsters"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000007.Gif" /></span>
<span id="nemo"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005720.Gif" /></span>
<span id="radar"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007338.Gif" /></span>
<span id="rat"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003137.Gif" /></span>
<span id="toystory"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000005.Gif" /></span>
<span id="up"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003138.Gif" /></span>
<span id="walle"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000006.Gif" /></span>
<div id="navi">
<div id="timer"></div>
<a id="prev" href="#"></a>
<a id="play" href="#"></a>
<a id="next" href="#"></a>
</div>
</div>
</div>
</div>
<div id="thumbs-wrapper">
<div id="thumbs">
<img src="img/small/pixar.jpg" />
<img src="img/small/bugs.jpg" />
<img src="img/small/cars.jpg" />
<img src="img/small/incred.jpg" />
<img src="img/small/monsters.jpg" />
<img src="img/small/nemo.jpg" />
<img src="img/small/radar002665resized.jpg" />
<img src="img/small/rat.jpg" />
<img src="img/small/toystory.jpg" />
<img src="img/small/up.jpg" />
<img src="img/small/walle.jpg" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
</div>
<div class="carousel">
<div class="container">Lorem ipsum dolor</div>
<div class="container">Lorem ipsum_for_testing dolor</div>
</div>
</body>
</html>
I added to the html file this part:
<div id="inner">
And
<div id="timer"></div>
<a id="prev" href="#"></a>
<a id="play" href="#"></a>
<a id="next" href="#"></a>
Then the javascript file:
$(function() {
$('#carousel span').append('<img src="img/gui/carousel_glare.png" class="glare" />');
$('#thumbs a').append('<img src="img/gui/carousel_glare_small.png" class="glare" />');
$('#carousel').carouFredSel({
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
responsive: true,
circular: false,
auto: true,
infinite: true,
items: {
visible: 1,
width: 200,
height: '56%'
},
scroll: {
fx: 'directscroll',
pauseOnHover: true,
duration: 500
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 6
},
width: 150,
height: '66%'
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
});
And the css file:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: url(img/gui/bg_glare.png) top center no-repeat #bcc;
}
html > body {
min-height: 600px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
position: absolute;
width: 50%;
left: 25%;
top: 50px;
}
#carousel-wrapper {
padding-bottom: 10px;
position: relative;
}
#carousel, #thumbs {
overflow: hidden;
}
#carousel-wrapper .caroufredsel_wrapper {
border-radius: 10px;
box-shadow: 0 0 5px #899;
}
#carousel span, #carousel img,
#thumbs a, #thumbs img {
display: block;
float: left;
}
#carousel span, #carousel a,
#thumbs span, #thumbs a {
position: relative;
}
#carousel img,
#thumbs img {
border: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#carousel img.glare,
#thumbs img.glare {
width: 102%;
height: auto;
}
#carousel span {
width: 554px;
height: 313px;
}
#thumbs-wrapper {
padding: 20px 40px;
position: relative;
}
#thumbs a {
border: 2px solid #899;
width: 150px;
height: 100px;
margin: 0 10px;
overflow: hidden;
border-radius: 10px;
-webkit-transition: border-color .5s;
-moz-transition: border-color .5s;
-ms-transition: border-color .5s;
transition: border-color .5s;
}
#thumbs a:hover, #thumbs a.selected {
border-color: #566;
}
#wrapper img#shadow {
width: 100%;
position: absolute;
bottom: 0;
}
#prev, #next {
background: transparent url('img/gui/carousel_nav.png') no-repeat 0 0;
display: block;
width: 19px;
height: 20px;
margin-top: -10px;
position: absolute;
top: 50%;
}
#prev {
background-position: 0 0;
left: 10px;
}
#next {
background-position: -19px 0;
right: 10px;
}
#prev:hover {
background-position: 0 -20px;
}
#next:hover {
background-position: -19px -20px;
}
#prev.disabled, #next.disabled {
display: none !important;
}
In the css file i didn't change the code in the javascript file i added:
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
And
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
The first jquery of the carousel is still working fine the second link.
But the new one with the play stop pause buttons i don't see them at all.
What i mean is something like this and somehow also to change the colors of the buttons play stop pause to fit the color of the big images maybe something more light or transparent color.
And the pause stop play should handle the big images not the small ones.

Coin-Slider does not display buttons correctly (except in Chrome)

Not sure why this is occurring, if I go to the coin-slider page in IE or Firefox the JavaScript works, but once I apply it to my local build for a site it displays the buttons as numbers and doesn't show the background box for the slider titles.
It works perfectly in Google Chrome though. I've triple checked my html and css and it looks correct, any ideas?
How it appears in Chrome, and how it appears in IE/Firefox (Hovering over what should be the circles in the second image).
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" type="type/css" href="coin-slider-styles.css">
</head>
<body>
<div id="container">
<div id="coin-slider">
<a href="group.html">
<img src="img/sliderGroup.jpg">
<span>
heading1
</span>
</a>
<a href="plan.html">
<img src="img/sliderPlan.jpg">
<span>
heading2
</span>
</a>
<a href="num.html" >
<img src="img/sliderNum.jpg">
<span>
heading3
</span>
</a>
<a href="exp.html" >
<img src="img/sliderExp.jpg">
<span>
heading4
</span>
</a>
<a href="rep.html">
<img src="img/sliderRep.jpg">
<span>
heading5
</span>
</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({width:800, height:300, spw: 12, sph: 5, sDelay: 1, delay: 6000, opacity:0.95, hoverPause: true, links: true, effect: 'rain' , titleSpeed: 500});
});
</script>
</body>
.coin-slider {
overflow: hidden;
zoom: 1;
position: relative;
}
.coin-slider a{
text-decoration: none;
outline: none;
border: none;
}
.cs-buttons {
font-size: 0px;
padding: 10px;
float: left;
}
.cs-buttons a {
margin-left: 5px;
height: 10px;
width: 10px;
float: left;
border: 1px solid #B8C4CF;
border-radius: 100%;
color: #B8C4CF;
text-indent: -1000px;
}
.cs-active {
background-color: #454545;
color: #FFFFFF;
}
.cs-title {
width: 780px;
padding: 10px;
background-color: #454545;
color: #FFFFFF;
font-size: 13px;
}
.cs-prev, .cs-next {
background-color: #454545;
color: #FFFFFF;
padding: 0 10px 0 0;
}

here it is working fine in
http://jsfiddle.net/sarath704/cgU9R/
check once where you get problem
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function() {
$('#coin-slider').coinslider({width:800, height:300, spw: 12, sph: 5, sDelay: 1, delay: 6000, opacity:0.95, hoverPause: true, links: true, effect: 'rain' , titleSpeed: 500});
});
</script>
<style>
.coin-slider {
overflow: hidden;
zoom: 1;
position: relative;
}
.coin-slider a{
text-decoration: none;
outline: none;
border: none;
}
.cs-buttons {
font-size: 0px;
padding: 10px;
float: left;
}
.cs-buttons a {
margin-left: 5px;
height: 10px;
width: 10px;
float: left;
border: 1px solid #B8C4CF;
border-radius: 100%;
color: #B8C4CF;
text-indent: -1000px;
}
.cs-active {
background-color: #454545;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="coin-slider">
<a href="group.html">
<img src="http://workshop.rs/projects/coin-slider/games/mini_ninjas.jpg" alt="Mini Ninjas" />
<span>
heading1
</span>
</a>
<a href="plan.html">
<img src="http://workshop.rs/projects/coin-slider/games/prince_of_persia.jpg" alt="Price of Persia" />
<span>
heading2
</span>
</a>
<a href="num.html" >
<img src="http://workshop.rs/projects/coin-slider/games/spiderman_shattered_dimensions.jpg" alt="Spiderman: Shattered Dimensions" />
<span>
heading3
</span>
</a>
<a href="exp.html" >
<img src="http://workshop.rs/projects/coin-slider/games/brink.jpg" alt="Brink" />
<span>
heading4
</span>
</a>
<a href="rep.html">
<img src="http://workshop.rs/projects/coin-slider/games/borderlands.jpg" alt="Borderlands" />
<span>
heading5
</span>
</a>
</div>
</div>
</body>
</html>