Develop Reference

Compounding Value within an object used to slide dot across the page incrementally

I am unable to get a variable to function properly as the translateX value within my object. I am wanting to make the dot scroll across the page each time the next button is clicked. My code is only able to move it back and forth for the first step.
I am new to the animation API, and I have already made this work with CSS transitions but I am trying to get a good handle on the API.
html:
<div class="progress__container">
<div class="progress__bar">
<div id="progress__fill" class="step1"></div>
<div class="circ" id="circ__1"></div>
<div class="circ" id="circ__2"></div>
<div class="circ" id="circ__3"></div>
<div class="circ" id="circ__4"></div>
<div id="progress__dot" class="prog__1"></div>
</div>
<div class="backBar"></div>
<div class="flexrow">
<span class="stepName">Account</span>
<span class="stepName">Frequency</span>
<span class="stepName">Amount</span>
<span class="stepName">Taxes</span>
</div>
<div class="button__container">
<button class="buttonStep" id="back">Back</button>
<button class="buttonStep is-active" id="next">Next</button>
</div>
</div>
js:
// give a starting value for the transformation
var startVal = 0;
// define the keyframes
var moveDot = [
{ transform: `translateX(${startVal}px)`},
{ transform: `translateX(${startVal + 190}px)`}
];
// definte the timing
var dotTiming = {
duration: 400,
fill: "forwards",
easing: 'ease-in',
}
// make the animation happen
var movingDot = document.getElementById("progress__dot").animate(
moveDot,
dotTiming
);
// pause the animation until called
movingDot.pause();
// on click fire the animation
document.getElementById('next').addEventListener('click', function() {
movingDot.playbackRate = 1;
if (startVal <= 380) {
movingDot.play();
startVal += 190;
}
});
document.getElementById('back').addEventListener('click', function() {
movingDot.playbackRate = -1;
if (startVal >= 0) {
movingDot.play();
startVal -= 190;
}
});
css:
#progress__fill {
height:2px;
position: absolute;
top: 7px;
left: 0;
background-color: darkred;
}
#progress__dot {
background-color: darkred;
color: #fff;
border-radius: 50%;
height: 8px;
width: 8px;
position: absolute;
text-align:center;
line-height: 8px;
padding: 6px;
top: 0;
font-size: 12px;
}
/* Static Bar Elements */
.progress__container {
width: 600px;
margin: 20px auto;
position: relative;
}
.backBar {
height:2px;
width:96%;
position: absolute;
top: 7px;
left: 2%;
background-color: lightgrey;
}
.progress__bar {
z-index: 100;
position: relative;
width: 96%;
margin: 0 auto;
}
.circ {
background-color: #fff;
border: 2px solid lightgrey;
border-radius: 50%;
height: 12px;
width: 12px;
display: inline-block;
}
#circ__2, #circ__3 {
margin-left: 30%
}
#circ__4 {
float: right;
}
.passed {
background-color: darkred;
border: 2px solid darkred;
}
.hide {
visibility: hidden
}
.flexrow {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* Buttons */
.buttonStep {
background: grey;
color: #fff;
padding: 10px 25px;
border-radius: 10px;
font-size: 16px;
}
#back {
float: left;
}
#next {
float: right;
}
.is-active {
background: darkred;
}
The way I have it set up, I expect for the translateX values to increment or decrement depending on the click event listeners which would make the circle slide across the page. What is actually happening is that only the first step works. it will not go past the first stop point. If I log moveDot in the console it gives me the values that I am expecting, but it will only start/stop at 0 and 190. the back button functions the same way. link to fiddle

It is animated from and to the same place every time. Move the definition of moveDot into the event listener:
// give a starting value for the transformation
var startVal = 0;
// definte the timing
var dotTiming = {
duration: 400,
fill: "forwards",
easing: 'ease-in',
}
// on click fire the animation
document.getElementById('next').addEventListener('click', function() {
if (startVal > 380){return;}
// define the keyframes
var moveDot = [{transform: `translateX(${startVal}px)`},
{transform: `translateX(${startVal + 190}px)`}];
// make the animation happen
var movingDot = document.getElementById("progress__dot").animate(
moveDot,
dotTiming
);
movingDot.playbackRate = 1;
movingDot.play();
startVal += 190;
});
document.getElementById('back').addEventListener('click', function() {
movingDot.playbackRate = -1;
if (startVal >= 0) {
movingDot.play();
startVal -= 190;
}
});

JS / CSS issue with Div Slider and Display:Table-Cell

I have a Div slider that rotates a set of Divs in and out of focus. Everything was working fine until I tried switching everything to (table / table-cell) in order to keep them all the Divs the same height in CSS. Now they still rotate out but one div remains visible with a reduced width off to the side of the stage. I get a sense that its position related but just can't figure out what's causing the issue.
Affected Page - https://www.harpercollege.edu/dev/blog-slider-test.php
JS Code:
$('.blog-posts').wrapInner('<div class="blog-posts-stage" />');
// Calculate Conditions & Set Vars
// var playTimer = 9,
slideQty = $('.well').length,
slideWidth = $('.well').width(),
stageWidth = $('.blog-posts-stage').width(),
contWidth = $('.blog-posts').width();
if ((slideQty * slideWidth) < contWidth) {
$('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
$('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
$('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
$('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}
$(window).resize(function() {
var slideQty = $('.well').length,
slideWidth = $('.well').width(),
stageWidth = $('.blog-posts-stage').width(),
contWidth = $('.blog-posts').width();
if ((slideQty * slideWidth) < contWidth) {
$('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
$('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
$('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
$('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}
});
$('.blog-posts-next').on('click', function(event) {
event.preventDefault();
$('.blog-posts-stage').animate({
left: -(slideWidth)
}, 500, function() {
$('.well:first').appendTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: '0px'
});
});
});
$('.blog-posts-prev').on('click', function(event) {
event.preventDefault();
$('.well:last').prependTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: -(slideWidth)
});
$('.blog-posts-stage').animate({
left: '0px'
}, 500, function() {});
});
function moveForward() {
$('.blog-posts-stage').animate({
left: -(slideWidth)
}, 500, function() {
$('.well:first').appendTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: '0px'
});
});
}
var timer = setInterval(moveForward, playTimer);
$('.blog-posts, .blog-posts-prev, .blog-posts-next').hover(function(ev) {
// clearInterval(timer);
}, function(ev) {
// timer = setInterval( moveForward, playTimer);
});
CSS Code:
<style>
.blog-posts {
width: 100%;
background: #eee;
font-size: 0;
position: relative;
}
.blog-posts-prev,
.blog-posts-next {
display: inline-block;
background: #eee;
color: #000;
text-decoration: none;
padding: 10px;
margin: 5px 0;
}
.blog-posts-prev:hover,
.blog-posts-next:hover {
background: #ccc;
}
.blog-posts-prev-disabled,
.blog-posts-next-disabled {
display: inline-block;
background: #eee;
color: #ccc;
text-decoration: none;
padding: 10px;
margin: 5px 0;
}
.blog-posts-stage {
position: relative;
white-space: normal;
width: 100%;
height: 100%;
float: none;
}
.well {
background: #ccc;
box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255);
width: 100%;
font-size: 12px;
text-align: left;
display: table-cell;
height: 100%;
width: 100%;
}
.well .row .col-sm-12.col-md-12 h2 {
float: left;
margin-top: 0px;
}
</style>

You could just use a lightbox library and save yourself the effort, but if you really want to do this why not try flex?
.blog-posts-stage {
display: flex;
flex-direction: row;
overflow: hidden;
}
.well-large {
flex-shrink: 0;
}

Underline slide transition in buttons

I tried to search for tutorials on this effect. The effect that I wanted is an active underline (or border-bottom) under a link. When I click on a link, the underline will slide over to the next link and so on... One example is this question.
I know that what I have in html are buttons, not nav menu. So the coding would be different. I'm thinking that I might need to convert the buttons to nav menu if it doesn't work out.
Anyway, the problem is that I did try to use the example mentioned above to make the underline move to a clinked link. But it's not working...
Here's my code which is on codepen.
$(document).ready(function() {
$(".con-button").click(function(){
if(this.id == "c-all") {
$(".con-button").removeClass("active");
$("#c-all").addClass("active");
$('.offline').hide();
$('.offline').fadeIn("slow").show();
$('.online').hide();
$('.online').fadeIn("slow").show();
$('.none').fadeIn("slow").show();
} else if (this.id == "c-online") {
$(".con-button").removeClass("active");
$("#c-online").addClass("active");
$('.offline').hide();
$('.online').hide();
$('.online').fadeIn("slow").show();
$('.none').hide();
} else if (this.id == "c-offline") {
$(".con-button").removeClass("active");
$("#c-offline").addClass("active");
$('.offline').hide();
$('.offline').fadeIn("slow").show();
$('.online').hide();
$('.none').hide();
}
})
getSteams();
});
var channels = ["BasicallyIDoWrk", "FreeCodeCamp", "Golgothus", "maatukka", "Vinesauce", "brunofin", "comster404", "OgamingSC2"];
var cb = "?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?";
function getSteams() {
channels.forEach(function(indchannel) {
//for (var channel in channels) {
//var indchannel = channel;
var streamURL = "https://api.twitch.tv/kraken/streams/" + indchannel + cb;
var channelURL = "https://api.twitch.tv/kraken/channels/" + indchannel + cb;
$.ajax({
url: streamURL,
type: 'GET',
dataType: "jsonp",
data: {
//action: 'query',
format: 'json',
},
headers: {
"Accept": "application/vnd.twitchtv.v5+json",
},
success: function(data) {
var game;
var status;
if(data.stream === null) {
$.getJSON(data._links.channel + "/?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?", function(data2) {
if(data2.status == 404) {
game = "The Account doesn't exist";
status = "none";
} else {
game = "Offline";
status = "offline";
}
$("#offline").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
} );
} else {
game = data.stream.game;
status = "online";
$("#online").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
};
}
});
});
}
html, body{
height:100%;
margin: 0;
background-color: #ffffff;
}
.wrapper {
text-align: center;
position: relative;
width: 100%;
height: 100%;
display:block;
}
.container {
width: 75%;
margin: 30px auto 0;
position: relative;
}
.logobox img {
width: 20%;
margin: 0 auto;
}
.controls {
position: relative;
width: 100%;
}
.con-button {
position: relative;
background-color: white;
border: none;
margin: 0.5em 0 0 0;
padding: 0.5em 1em 0.5em 1em;
text-align: center;
color: rgb(100,65,164);
font-size: 20px;
transition: .4s;
}
.con-button:hover {
cursor: pointer;
/*border-bottom: 3px solid rgba(224, 217, 236, 1);*/
}
.con-button:focus {outline: 0;}
.effect {
position: absolute;
left: 0;
transition: 0.4s ease-in-out;
}
.controls .effect {
/*border-bottom: 3px solid rgba(100, 65, 164, 1);*/
height: 2px;
bottom: 5px;
background: #6441A4;
margin-left:/*-45px*/auto;
margin-right:/*-45px*/auto;
width: 33%;
}
button:nth-child(1).active ~ .effect {left: 0%;}
button:nth-child(2).active ~ .effect {left: 33%;}
button:nth-child(3).active ~ .effect {left: 66%;}
.divider hr {
border-top: 1px solid #6441A4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="twitchtvarea">
<div class="logobox">
<img src="https://s6.postimg.org/bay7stotd/Twitch_Purple_RGB.png" />
</div>
<div class="twitchbox">
<div class="controls">
<button id="c-all" class="con-button active" type="button">All</button>
<button id="c-online" class="con-button" type="button">Online</button>
<button id="c-offline" class="con-button" type="button">Offline</button>
</div>
<div class="divider"><hr></div>
<div id="online"></div>
<div id="offline"></div>
</div>
</div>
</div>
</div>
I made sure that .active is working in Javascript but I still need help making the underline moving from one link to another when clicked. All I know is that it has something to do with the CSS. Any help or tutorials are appreciated.

You can use this simple technique if you can use jQuery. It is quite generic and you can use any html elements whether nav, buttons or simple div's. You just need to have an outer element that contains all your links.
The idea is to find the position and width of the clicked anchor tag and then apply the same(or after adding some modification) to the underline element. To make its movement smooth you can add transition for left and width properties of this underline element.
$("#outer-container a").on("click", function(e){
e.preventDefault();
var cssObj = {};
cssObj.left = $(this).position().left;
cssObj.width = $(this).outerWidth();
$("#outer-container #underline").css( cssObj );
});//a click()
$("#outer-container a").eq(0).trigger("click");
#outer-container
{
text-align: center;
position: relative;
}
#outer-container a
{
color: #333;
display: inline-block;
padding: 0 10px;
text-decoration: none;
}
#outer-container #underline
{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100px;
background-color: #333;
transition: left 0.3s ease, width 0.3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="outer-container">
One
Two
Three
Four
<span id="underline"></span>
</div><!--#outer-container-->

Checkout this,
$(document).ready(function() {
$(".con-button").click(function(){
if(this.id == "c-all") {
$(".con-button").removeClass("active");
$("#c-all").addClass("active");
$('.offline').hide();
$('.offline').fadeIn("slow").show();
$('.online').hide();
$('.online').fadeIn("slow").show();
$('.none').fadeIn("slow").show();
} else if (this.id == "c-online") {
$(".con-button").removeClass("active");
$("#c-online").addClass("active");
$('.offline').hide();
$('.online').hide();
$('.online').fadeIn("slow").show();
$('.none').hide();
} else if (this.id == "c-offline") {
$(".con-button").removeClass("active");
$("#c-offline").addClass("active");
$('.offline').hide();
$('.offline').fadeIn("slow").show();
$('.online').hide();
$('.none').hide();
}
})
getSteams();
});
var channels = ["BasicallyIDoWrk", "FreeCodeCamp", "Golgothus", "maatukka", "Vinesauce", "brunofin", "comster404", "OgamingSC2"];
var cb = "?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?";
function getSteams() {
channels.forEach(function(indchannel) {
//for (var channel in channels) {
//var indchannel = channel;
var streamURL = "https://api.twitch.tv/kraken/streams/" + indchannel + cb;
var channelURL = "https://api.twitch.tv/kraken/channels/" + indchannel + cb;
$.ajax({
url: streamURL,
type: 'GET',
dataType: "jsonp",
data: {
//action: 'query',
format: 'json',
},
headers: {
"Accept": "application/vnd.twitchtv.v5+json",
},
success: function(data) {
var game;
var status;
if(data.stream === null) {
$.getJSON(data._links.channel + "/?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?", function(data2) {
if(data2.status == 404) {
game = "The Account doesn't exist";
status = "none";
} else {
game = "Offline";
status = "offline";
}
$("#offline").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
} );
} else {
game = data.stream.game;
status = "online";
$("#online").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
};
}
});
});
}
html, body{
height:100%;
margin: 0;
background-color: #ffffff;
}
.wrapper {
text-align: center;
position: relative;
width: 100%;
height: 100%;
display:block;
}
.container {
width: 75%;
margin: 30px auto 0;
position: relative;
}
.logobox img {
width: 20%;
margin: 0 auto;
}
.controls {
position: relative;
width: 100%;
}
.con-button {
position: relative;
background-color: white;
border: none;
margin: 0.5em 0 0 0;
padding: 0.5em 1em 0.5em 1em;
text-align: center;
color: rgb(100,65,164);
font-size: 20px;
transition: .4s;
}
.con-button:hover {
cursor: pointer;
/*border-bottom: 3px solid rgba(224, 217, 236, 1);*/
}
.con-button:focus {outline: 0;}
.effect {
position: absolute;
left: 0;
transition: 0.4s ease-in-out;
}
.controls .effect {
/*border-bottom: 3px solid rgba(100, 65, 164, 1);*/
height: 2px;
bottom: 5px;
background: #6441A4;
margin-left:/*-45px*/auto;
margin-right:/*-45px*/auto;
width: 33%;
}
button:nth-child(1).active ~ .effect {left: 0%;}
button:nth-child(2).active ~ .effect {left: 33%;}
button:nth-child(3).active ~ .effect {left: 66%;}
.divider hr {
border-top: 1px solid #6441A4;
}
.effect {
position: absolute;
left: 18%;
transition: 0.4s ease-in-out;
}
.controls button:nth-child(1).active ~ .effect {
left: 28%;
/* the middle of the first <a> */
}
.controls button:nth-child(2).active ~ .effect {
left: 50%;
/* the middle of the second <a> */
}
.controls button:nth-child(3).active ~ .effect {
left: 77%;
/* the middle of the third <a> */
}
.controls button:nth-child(4).active ~ .effect {
left: 93.5%;
/* the middle of the forth <a> */
}
.controls .effect {
width: 55px;
height: 2px;
bottom: 5px;
background: #00ABE8;
margin-left:-45px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="twitchtvarea">
<div class="logobox">
<img src="https://s6.postimg.org/bay7stotd/Twitch_Purple_RGB.png" />
</div>
<div class="twitchbox">
<div class="controls">
<button id="c-all" class="con-button active" type="button">All</button>
<button id="c-online" class="con-button" type="button">Online</button>
<button id="c-offline" class="con-button" type="button">Offline</button>
<div class="effect"></div>
</div>
<div class="divider"><hr></div>
<div id="online"></div>
<div id="offline"></div>
</div>
</div>
</div>
</div>
I have made changes in your code to make it work.

News/Image Slider for PHP Loop, (JS) Reset Interval on Click & Better Format for Unique ID's

I'm currently setting up a news/image slider on my site via JS. I have the slide data rolling in through a PHP loop with unique ID's. Everything is working smoothly, I just can't figure out how to reset the timer/interval when you manually switch slides.
Also, there has to be a better/easier way to write the manual click navigation I currently have setup with all the unique ID's. I have the loop sliced at 5.
(my code is a mess)
$(document).ready(function(){
$("#newsFeatured article:first").addClass("active");
$("#newsFeatured li:first").addClass("active");
});
var toggleSlide = function(){
$("#newsFeatured article.active").removeClass("active")
.next().add("#newsFeatured article:first").last().addClass("active");
$("#newsFeatured li.active").removeClass("active")
.next().add("#newsFeatured li:first").last().addClass("active");
}
setInterval(toggleSlide, 8000);
$(document).ready(function(){
$("#control1").on('click', function() {
$("#slide1").addClass("active");
$("#slide2, #slide3, #slide4, #slide5").removeClass("active");
$("#control1").addClass("active");
$("#control2, #control3, #control4, #control5").removeClass("active");
clearInterval(toggleSlide);
});
$("#control2").on('click', function() {
$("#slide2").addClass("active");
$("#slide1, #slide3, #slide4, #slide5").removeClass("active");
$("#control2").addClass("active");
$("#control1, #control3, #control4, #control5").removeClass("active");
});
$("#control3").on('click', function() {
$("#slide3").addClass("active");
$("#slide1, #slide2, #slide4, #slide5").removeClass("active");
$("#control3").addClass("active");
$("#control1, #control2, #control4, #control5").removeClass("active");
});
$("#control4").on('click', function() {
$("#slide4").addClass("active");
$("#slide1, #slide2, #slide3, #slide5").removeClass("active");
$("#control4").addClass("active");
$("#control1, #control2, #control3, #control5").removeClass("active");
});
$("#control5").on('click', function() {
$("#slide5").addClass("active");
$("#slide1, #slide2, #slide3, #slide4").removeClass("active");
$("#control5").addClass("active");
$("#control1, #control2, #control3, #control4").removeClass("active");
});
});
https://jsfiddle.net/aor1xmb5/
Lastly, i'm interested in getting my slide to interact with touch for mobile devices, if anyone can point me in the direction of a good tutorial on getting that started.
Thanks!

Clearing intervals is fairly simple:
function myFn() {console.log('idle');}
var myTimer = setInterval(myFn, 4000);
// Then, later at some future time,
// to restart a new 4 second interval starting at this exact moment in time
clearInterval(myTimer);
myTimer = setInterval(myFn, 4000);
Please check the snippet:
$(function() {
$("#newsFeatured article:first").addClass("active");
$("#newsFeatured li:first").addClass("active");
var sliderInterval = setInterval(toggleSlide, 8000);
$('.featuredControls').on('click', 'li', function() {
var $this = $(this),
id = $this.attr('id'),
index = id.replace('control', '');
slideTo(index);
// Clear interval.
clearInterval(sliderInterval);
sliderInterval = setInterval(toggleSlide, 8000);
});
function slideTo(index) {
var id = '#control' + index,
$this = $(id);
// Highlight active slide.
$(".featuredSlide").removeClass("active");
$("#slide" + index).addClass("active");
// Highlight active control.
$this.parent().find('li').removeClass("active");
$this.addClass("active");
}
function toggleSlide() {
// Get current slide.
var id,
index,
$next = $(".featuredControls .active").next();
// If last item, start over.
if ($next.length === 0) {
$next = $(".featuredControls li").first();
}
id = $next.attr('id'),
index = id.replace('control', '');
slideTo(index);
};
});
/* NEWS FEATURED SLIDER */
#newsFeatured {
position: relative;
height: 300px;
transition: 0.1s all linear;
}
#newsFeatured:hover {
box-shadow: -6px 0px 0px 0px #ffc60d;
}
.featuredControls {
opacity: 0;
position: absolute;
list-style-type: none;
right: 30px;
margin: 0;
padding: 20px;
z-index: 1;
transition: 0.2s all linear;
}
#newsFeatured:hover .featuredControls {
opacity: 1;
right: 0;
}
.featuredControls li {
background: rgba(0, 0, 0, 0.7);
display: inline-block;
height: 20px;
width: 15px;
border: 0;
border-radius: 3px;
cursor: pointer;
}
.featuredControls li.active {
background: #ffc60d;
}
.featuredSlide {
display: none;
background: rgba(0, 0, 0, 0.3);
position: absolute;
left: 0;
width: 100%;
height: 300px;
overflow: hidden;
}
#newsFeatured:hover .featuredSlide {
box-shadow: -1px 0px 0px 0px #101415;
}
#newsFeatured article.active {
display: block;
}
.featuredImage {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
transition: 0.3s all ease;
animation: featuredImage ease 1;
animation-duration: 1s;
}
#keyframes featuredImage {
from {
opacity: 0;
background-position: 30% 50%;
}
to {
opacity: 1;
background-position: 50% 50%;
}
}
.featuredContent {
width: 100%;
padding: 20px;
background: rgba(0, 0, 0, 0.65);
position: absolute;
bottom: 0;
transition: 0.5s all ease;
}
.featuredContent h2 {
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
margin: 0;
animation: featuredTitle ease 1;
animation-duration: 1s;
}
#keyframes featuredTitle {
from {
padding-left: 75px;
opacity: 0;
}
to {
padding-left: 0;
opacity: 1;
}
}
.featuredContent h2 a {
color: #ffc60d;
margin: 0 0 5px 0;
transition: 0.1s all linear;
}
#newsFeatured:hover .featuredContent h2 a {
color: #eee;
}
.featuredContent section {
color: #a7a397;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='newsFeatured' class='ipsClearfix'>
<ul class='featuredControls'>
<li id='control1'></li>
<li id='control2'></li>
</ul>
<article id='slide1' class='featuredSlide'>
<a href=''>
<div class='featuredImage' style='background-image: url(http://i.imgur.com/udTA5il.jpg);'></div>
</a>
<div class='featuredContent'>
<h2>
First Slide Title
</h2>
<section class='ipsType_normal ipsType_richText ipsType_break'>First slide description.</section>
</div>
</article>
<article id='slide2' class='featuredSlide'>
<a href=''>
<div class='featuredImage' style='background-image: url(http://i.imgur.com/SWy0AHZ.jpg);'></div>
</a>
<div class='featuredContent'>
<h2>
Second Slide Title
</h2>
<section class='ipsType_normal ipsType_richText ipsType_break'>Second slide description.</section>
</div>
</article>
</div>

Displaying caption for this image plugin

This plugins default technique of displaying caption involves, extracting the content of the "alt" attribute from the corresponding image which it targets.
captionOn = function()
{
var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' ).attr( 'alt' );
if( description.length > 0 )
$( '<div id="imagelightbox-caption">' + description + '</div>' ).appendTo( 'body' );
},
captionOff = function()
{
$( '#imagelightbox-caption' ).remove();
},
The design I am working on requires more content to be included for the caption, like comments, date, etc.
So obviously those details can't be included in the "alt" tag of an image. Will require separate "div" for that.
How can I modify the above "description" variable in the JS which would pick the "div#caption" for that image, and display its content?
<img class="social-img" src="cwc/21.jpg" alt="lorem sit amet" /><div id="caption">lorem sit amet</div>
Since this is an image gallery, there will be lot of that HTML code replicated. So the concern I am facing is that when somebody clicks that image, it should only show the "div#caption" for that particular image.
http://codepen.io/arjunmenon/pen/NqqyJe - Default implementation
$(function() {
// ACTIVITY INDICATOR
var activityIndicatorOn = function() {
$('<div id="imagelightbox-loading"><div></div></div>').appendTo('body');
},
activityIndicatorOff = function() {
$('#imagelightbox-loading').remove();
},
// OVERLAY
overlayOn = function() {
$('<div id="imagelightbox-overlay"></div>').appendTo('body');
},
overlayOff = function() {
$('#imagelightbox-overlay').remove();
},
// CLOSE BUTTON
closeButtonOn = function(instance) {
$('<button type="button" id="imagelightbox-close" title="Close"></button>').appendTo('body').on('click touchend', function() {
$(this).remove();
instance.quitImageLightbox();
return false;
});
},
closeButtonOff = function() {
$('#imagelightbox-close').remove();
},
// CAPTION
captionOn = function() {
var description = $('a[href="' + $('#imagelightbox').attr('src') + '"] img').attr('alt');
if (description.length > 0)
$('<div id="imagelightbox-caption">' + description + '</div>').appendTo('body');
},
captionOff = function() {
$('#imagelightbox-caption').remove();
},
// NAVIGATION
navigationOn = function(instance, selector) {
var images = $(selector);
if (images.length) {
var nav = $('<div id="imagelightbox-nav"></div>');
for (var i = 0; i < images.length; i++)
nav.append('<button type="button"></button>');
nav.appendTo('body');
nav.on('click touchend', function() {
return false;
});
var navItems = nav.find('button');
navItems.on('click touchend', function() {
var $this = $(this);
if (images.eq($this.index()).attr('href') != $('#imagelightbox').attr('src'))
instance.switchImageLightbox($this.index());
navItems.removeClass('active');
navItems.eq($this.index()).addClass('active');
return false;
})
.on('touchend', function() {
return false;
});
}
},
navigationUpdate = function(selector) {
var items = $('#imagelightbox-nav button');
items.removeClass('active');
items.eq($(selector).filter('[href="' + $('#imagelightbox').attr('src') + '"]').index(selector)).addClass('active');
},
navigationOff = function() {
$('#imagelightbox-nav').remove();
},
// ARROWS
arrowsOn = function(instance, selector) {
var $arrows = $('<button type="button" class="imagelightbox-arrow imagelightbox-arrow-left"></button><button type="button" class="imagelightbox-arrow imagelightbox-arrow-right"></button>');
$arrows.appendTo('body');
$arrows.on('click touchend', function(e) {
e.preventDefault();
var $this = $(this),
$target = $(selector + '[href="' + $('#imagelightbox').attr('src') + '"]'),
index = $target.index(selector);
if ($this.hasClass('imagelightbox-arrow-left')) {
index = index - 1;
if (!$(selector).eq(index).length)
index = $(selector).length;
} else {
index = index + 1;
if (!$(selector).eq(index).length)
index = 0;
}
instance.switchImageLightbox(index);
return false;
});
},
arrowsOff = function() {
$('.imagelightbox-arrow').remove();
};
// WITH ACTIVITY INDICATION
$('a[data-imagelightbox="a"]').imageLightbox({
onLoadStart: function() {
activityIndicatorOn();
},
onLoadEnd: function() {
activityIndicatorOff();
},
onEnd: function() {
activityIndicatorOff();
}
});
// WITH OVERLAY & ACTIVITY INDICATION
$('a[data-imagelightbox="b"]').imageLightbox({
onStart: function() {
overlayOn();
},
onEnd: function() {
overlayOff();
activityIndicatorOff();
},
onLoadStart: function() {
activityIndicatorOn();
},
onLoadEnd: function() {
activityIndicatorOff();
}
});
// WITH "CLOSE" BUTTON & ACTIVITY INDICATION
var instanceC = $('a[data-imagelightbox="c"]').imageLightbox({
quitOnDocClick: false,
onStart: function() {
closeButtonOn(instanceC);
},
onEnd: function() {
closeButtonOff();
activityIndicatorOff();
},
onLoadStart: function() {
activityIndicatorOn();
},
onLoadEnd: function() {
activityIndicatorOff();
}
});
// WITH CAPTION & ACTIVITY INDICATION
$('a[data-imagelightbox="d"]').imageLightbox({
onLoadStart: function() {
captionOff();
activityIndicatorOn();
},
onLoadEnd: function() {
captionOn();
activityIndicatorOff();
},
onEnd: function() {
captionOff();
activityIndicatorOff();
}
});
// WITH ARROWS & ACTIVITY INDICATION
var selectorG = 'a[data-imagelightbox="g"]';
var instanceG = $(selectorG).imageLightbox({
onStart: function() {
arrowsOn(instanceG, selectorG);
},
onEnd: function() {
arrowsOff();
activityIndicatorOff();
},
onLoadStart: function() {
activityIndicatorOn();
},
onLoadEnd: function() {
$('.imagelightbox-arrow').css('display', 'block');
activityIndicatorOff();
}
});
// WITH NAVIGATION & ACTIVITY INDICATION
var selectorE = 'a[data-imagelightbox="e"]';
var instanceE = $(selectorE).imageLightbox({
onStart: function() {
navigationOn(instanceE, selectorE);
},
onEnd: function() {
navigationOff();
activityIndicatorOff();
},
onLoadStart: function() {
activityIndicatorOn();
},
onLoadEnd: function() {
navigationUpdate(selectorE);
activityIndicatorOff();
}
});
// ALL COMBINED
var selectorF = 'a[data-imagelightbox="f"]';
var instanceF = $(selectorF).imageLightbox({
onStart: function() {
overlayOn();
closeButtonOn(instanceF);
arrowsOn(instanceF, selectorF);
},
onEnd: function() {
overlayOff();
captionOff();
closeButtonOff();
arrowsOff();
activityIndicatorOff();
},
onLoadStart: function() {
captionOff();
activityIndicatorOn();
},
onLoadEnd: function() {
captionOn();
activityIndicatorOff();
$('.imagelightbox-arrow').css('display', 'block');
}
});
});
#imagelightbox {
cursor: pointer;
position: fixed;
z-index: 10000;
-ms-touch-action: none;
touch-action: none;
-webkit-box-shadow: 0 0 3.125em rgba(0, 0, 0, .75);
/* 50 */
box-shadow: 0 0 3.125em rgba(0, 0, 0, .75);
/* 50 */
}
/* ACTIVITY INDICATION */
#imagelightbox-loading,
#imagelightbox-loading div {
border-radius: 50%;
}
#imagelightbox-loading {
width: 2.5em;
/* 40 */
height: 2.5em;
/* 40 */
background-color: #444;
background-color: rgba(0, 0, 0, .5);
position: fixed;
z-index: 10003;
top: 50%;
left: 50%;
padding: 0.625em;
/* 10 */
margin: -1.25em 0 0 -1.25em;
/* 20 */
-webkit-box-shadow: 0 0 2.5em rgba(0, 0, 0, .75);
/* 40 */
box-shadow: 0 0 2.5em rgba(0, 0, 0, .75);
/* 40 */
}
#imagelightbox-loading div {
width: 1.25em;
/* 20 */
height: 1.25em;
/* 20 */
background-color: #fff;
-webkit-animation: imagelightbox-loading .5s ease infinite;
animation: imagelightbox-loading .5s ease infinite;
}
#-webkit-keyframes imagelightbox-loading {
from {
opacity: .5;
-webkit-transform: scale(.75);
}
50% {
opacity: 1;
-webkit-transform: scale(1);
}
to {
opacity: .5;
-webkit-transform: scale(.75);
}
}
#keyframes imagelightbox-loading {
from {
opacity: .5;
transform: scale(.75);
}
50% {
opacity: 1;
transform: scale(1);
}
to {
opacity: .5;
transform: scale(.75);
}
}
/* OVERLAY */
#imagelightbox-overlay {
background-color: #fff;
background-color: rgba(255, 255, 255, .9);
position: fixed;
z-index: 9998;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* "CLOSE" BUTTON */
#imagelightbox-close {
width: 2.5em;
/* 40 */
height: 2.5em;
/* 40 */
text-align: left;
background-color: #666;
border-radius: 50%;
position: fixed;
z-index: 10002;
top: 2.5em;
/* 40 */
right: 2.5em;
/* 40 */
-webkit-transition: color .3s ease;
transition: color .3s ease;
}
#imagelightbox-close:hover,
#imagelightbox-close:focus {
background-color: #111;
}
#imagelightbox-close:before,
#imagelightbox-close:after {
width: 2px;
background-color: #fff;
content: '';
position: absolute;
top: 20%;
bottom: 20%;
left: 50%;
margin-left: -1px;
}
#imagelightbox-close:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#imagelightbox-close:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* CAPTION */
#imagelightbox-caption {
text-align: center;
color: #fff;
background-color: #666;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0.625em;
}
/* 10 */
#caption {
color: #fff;
background-color: #666;
position: fixed;
z-index: 10001;
top: 0;
right: 0;
width: 25%;
height: auto;
min-height: 100%;
padding: 0.625em;
}
/* NAVIGATION */
#imagelightbox-nav {
background-color: #444;
background-color: rgba(0, 0, 0, .5);
border-radius: 20px;
position: fixed;
z-index: 10001;
left: 50%;
bottom: 3.75em;
/* 60 */
padding: 0.313em;
/* 5 */
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
#imagelightbox-nav button {
width: 1em;
/* 20 */
height: 1em;
/* 20 */
background-color: transparent;
border: 1px solid #fff;
border-radius: 50%;
display: inline-block;
margin: 0 0.313em;
/* 5 */
}
#imagelightbox-nav button.active {
background-color: #fff;
}
/* ARROWS */
.imagelightbox-arrow {
width: 3.75em;
/* 60 */
height: 7.5em;
/* 120 */
background-color: #444;
background-color: rgba(0, 0, 0, .5);
vertical-align: middle;
display: none;
position: fixed;
z-index: 10001;
top: 50%;
margin-top: -3.75em;
/* 60 */
}
.imagelightbox-arrow:hover,
.imagelightbox-arrow:focus {
background-color: #666;
background-color: rgba(0, 0, 0, .75);
}
.imagelightbox-arrow:active {
background-color: #111;
}
.imagelightbox-arrow-left {
left: 2.5em;
/* 40 */
}
.imagelightbox-arrow-right {
right: 2.5em;
/* 40 */
}
.imagelightbox-arrow:before {
width: 0;
height: 0;
border: 1em solid transparent;
content: '';
display: inline-block;
margin-bottom: -0.125em;
/* 2 */
}
.imagelightbox-arrow-left:before {
border-left: none;
border-right-color: #fff;
margin-left: -0.313em;
/* 5 */
}
.imagelightbox-arrow-right:before {
border-right: none;
border-left-color: #fff;
margin-right: -0.313em;
/* 5 */
}
#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav,
.imagelightbox-arrow {
-webkit-animation: fade-in .25s linear;
animation: fade-in .25s linear;
}
#-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#media only screen and (max-width: 41.250em)
/* 660 */
{
#container {
width: 100%;
}
#imagelightbox-close {
top: 1.25em;
/* 20 */
right: 1.25em;
/* 20 */
}
#imagelightbox-nav {
bottom: 1.25em;
/* 20 */
}
.imagelightbox-arrow {
width: 2.5em;
/* 40 */
height: 3.75em;
/* 60 */
margin-top: -2.75em;
/* 30 */
}
.imagelightbox-arrow-left {
left: 1.25em;
/* 20 */
}
.imagelightbox-arrow-right {
right: 1.25em;
/* 20 */
}
}
#media only screen and (max-width: 20em)
/* 320 */
{
.imagelightbox-arrow-left {
left: 0;
}
.imagelightbox-arrow-right {
right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/full/7.jpg" data-imagelightbox="d">
<img src="http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/thumb/7.jpg" alt="The end of the railway" />
</a>
</li>
<li>
<a href="http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/full/8.jpg" data-imagelightbox="d">
<img src="http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/thumb/8.jpg" alt="Railway in Klaipeda" />
</a>
</li>
<li>
<a href="http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/full/9.jpg" data-imagelightbox="d">
<img src="http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/thumb/9.jpg" alt="Herkaus Manto street in Klaipeda" />
</a>
</li>
</ul>
<script src="http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/imagelightbox.min.js"></script>
Thanks

Replace this line:
var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' ).attr( 'alt' );
...with this one:
var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] ' ).find( '#caption' ).html();