Develop Reference

How to convert multiple span to image

I have a page which lists a series of news posts, and each post has a number of images where the URL's are placed into span's. These are then converted into images when you hover over the related post title. I've done this due to performance issues with so many images on the page.
My problem though is that when you hover over the post title each span within that particular post is then replaced with an image using only the 'first' image url. So where was: image-1, image-2, image-3, it then becomes: image-1, image-1, image-1.
Do I need to loop through the spans one by one to do this?
I have used the following javascript:
$('.article-post').hover(function() {
// Find our span
var elem = $(this).find('span.image');
// get our img url
var src = elem.attr('data-original');
// Change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"/>');
});
And here is my HTML layout:
<article class="article-post">
<header class="article-header">
<h1>Title...</h1>
<div class="image-preview">
<ul>
<li>
<span class="image" data-original="http://www..../wp-content/uploads/2016/04/image-1.jpg" >
</li>
<li>
<span class="image" data-original="http://www..../wp-content/uploads/2016/04/image-2.jpg" >
</li>
<li>
<span class="image" data-original="http://www..../wp-content/uploads/2016/04/image-3.jpg" >
</li>
</ul>
</div>
</header>
...
</article>

You need to use .each() to iterate all span.image elements and perform the desired operation.
$('.article-post').hover(function() {
// Find all span's iterate and replace with image
$(this).find('span.image').each(function(){
var elem = $(this);
// get our img url
var src = elem.attr('data-original');
// Change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"/>');
})
});
$('.article-post').hover(function() {
// Find all span's iterate and replace with image
$(this).find('span.image').each(function() {
var elem = $(this);
// get our img url
var src = elem.attr('data-original');
// Change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"/>');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="article-post">
<header class="article-header">
<h1>Title...</h1>
<div class="image-preview">
<ul>
<li>
<span class="image" data-original="https://i.stack.imgur.com/lJ0Rx.jpg?s=32&g=1"></span>
</li>
<li>
<span class="image" data-original="https://i.stack.imgur.com/xOwgU.png?s=32&g=1"></span>
</li>
</ul>
</div>
</header>
</article>

Animation not working with list item

I am trying to show animation on list item click. Same animation work with button click but not with list item.
No exception printing on console.
Here is my code.
function animateButtons(clicked_btn_id){
var circle = $('#' + clicked_btn_id + ' .circle');
if (!circle.length) {
$('#' + clicked_btn_id).append('<div class="circle"></div>');
circle = $('#' + clicked_btn_id + ' .circle');
}
setTimeout(function(){
circle.toggleClass('open');
});
setTimeout(function() {
//change image back
circle.toggleClass('open');
}, 300);
}
}
function clickedControlButton(clicked_btn_id){
animateButtons(clicked_btn_id);
}
Here is html code.
<div class="wrapper">
<ul class="nav nav-tabs list" id="myTab">
<li>
<img src="images/one.png" class="img-circle center-block img-reponsive" alt="one" onclick="clickedControlButton(this.id)" id="btnone">
<p style="color:white;" class="index-footer-btn-text" id="oneText"> one </p>
</li>
<li>
<img src="images/two.png" class="img-circle center-block img-reponsive" alt="two" onclick="clickedControlButton(this.id)" id="btntwo">
<p style="color:white;" class="index-footer-btn-text" id="twoText"> two </p>
</li>
<li>
<img src="images/three.png" class="img-circle center-block img-reponsive" alt="three" onclick="clickedControlButton(this.id)" id="btnthree">
<p style="color:white;" class="index-footer-btn-text" id="threeText"> three </p>
</li>
</ul>
</div>

You may need to add the listener to the list items and not to the images. Images do not support nested elements, meaning that you can't add any circles inside the image, so you need to add it inside the list and format it with CSS to look as you wish.
So:
Remove the onclick event from the img elements
Give the list elements some id's
Attach the events to the list elements
Format your circles using CSS
Here is a JSFiddle with the functionality you want to achieve:
https://jsfiddle.net/oz15hzsb/
Here is how to attach the listeners:
$('.nav-tabs li').click(function(){
animateButtons($(this).attr('id'));
})

Slideshow with bootsrap collapse and tab

I am trying to make a slideshow with Bootstrap's JavaScript collapse and tab. The idea is to have a list of thumbnails that can be clicked to show a blow up of the picture in a collapse.
I want to be able to click on the first thumbnail to open up the collapse with the first thumbnails blown up pic. When the second thumbnail is clicked, the first blown up pic should be replaced with the second one.
The problem I'm running into right now is that the blown up images are showing up in a list on top of each other instead of replacing each other.
Here is a fiddle with the current issue: http://jsfiddle.net/g7nrt9b4/
Code for the Fiddle:
<div class="panel-body">
<ul class="thumb-list">
<li><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></li>
<li><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></li>
</ul>
<div class="collapse pic-theater" id="collapseA1">
<img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" />
</div>
<div class="collapse pic-theater" id="collapseA2">
<img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" />
</div>
</div>
Thanks in advance!

Here you go:
Add some class (show-img in the example below) to your img tags, so you can append a click event to them.
Add some image loading indicator to inform the user that something is going on when thumbnail is clicked (used blockUI just for example).
And we're ready to go:
HTML:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Title.
</h3>
</div>
<div class="panel-body">
<ul class="thumb-list">
<li><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></li>
<li><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></li>
<!-- more images ... -->
</ul>
<div id="collapse" class="collapse pic-theater">
<div class="block">
<img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" />
</div>
</div>
</div>
</div>
<img src="https://amitchandnz.files.wordpress.com/2010/08/please_wait.gif?w=614" id="spinner" />
jQuery:
// don't want to reload current image if it has been already loaded, so make variable for that:
var loaded = false,
// lastclicked is the item that was last clikced. This is just a variable now, so we do not have to repeat 'var':
lastClicked,
// set the collapse element as variable, so we have easir to call it later on:
collapseEl = $('#collapse');
// method that specify what should happen when the thumbnail is clicked:
$('.show-img').click( function(){
// class 'current' is to define if the thumbnail was clicked as last, if so, collapse the panel, if not, load image of the thumbnail that was just clicked
$('.thumb-img').removeClass('current');
$(this).find('.thumb-img').addClass('current');
if(this != lastClicked){
// the thumbnail wasn't clicked last time:
lastClicked = this;
loaded = false;
}else{
// the thumbnail was clicked last time, so we want to collapse the panel instead of reloading image again:
collapseEl.collapse('toggle');
loaded = true;
}
if(!loaded){
// show the panel as there's another item loaded inside:
collapseEl.collapse('show');
// set that this item is being loaded:
loaded = true;
// fetch the image source from the thumbnail 'href' attribute:
var img = $(this).find('.thumb-img').attr('src');
// notify the user that something is going on while loading the image:
$('.block').block({
message : $('#spinner'),
css : {
background : 'none',
border : 'none'
}
});
// load the image:
$('.theater-img').load( function(){
// set image as loaded, so the click would not repeat loading process (could be skipped if the images are cached):
loaded = false;
// remove loading indicator:
$('.block').unblock();
// added [ '?'+ (new Date).getTime() ] - to simulate different images. So each new (except the one that has a 'current' class) thumbnail click tends like it's a new image:
}).attr('src', img + '?'+ (new Date).getTime());
}
});
// when panel is collapsed, remove class 'current' from the img, so that we know it's not displayed:
collapseEl.on('hide.bs.collapse', function () {
$('.thumb-img').removeClass('current');
})
DEMO

Matching division widths with jquery

This is a question regarding matching division widths with jquery. Here is the html code I am working with.
<ul class="thumbs_container">
<li class="thumbs">
<a class="fancybox" href="" >
<div class="thumbs_image_container">
<img src="" />
</div>
<div class="caption">
caption
</div>
</a>
</li>
<li class="thumbs">
<a class="fancybox" href="" >
<div class="thumbs_image_container">
<img src="" />
</div>
<div class="caption">
caption
</div>
</a>
</li>
</ul>
I will have multiple list items with the class 'thumbs'. What I want to do is match the widths of the divs with the class 'caption' to the widths of the divs with the class 'thumbs_image_container', but treating each list item separately.
Could someone please give me some pointers on how to do this? I know how to match the widths, but I am having problems figuring out how to treat each list item separately.

Try using $.each()
var $ulWidth = $('thumbs_container').width();
$('li.thumbs').each( function() {
var $divWidth = $(this).find('div.caption').width(); //Width of div inside Current li..
if( parseInt($ulWidth) == parseInt($divWidth) ) {
// Do Something
}
});

Use jQuery's each ( Jquery $.each selector )
This code will get the set of elements with class thumbs, then check if each element contains a class named caption, and if that element does contain caption, then it takes the related width on the element with class = thumbs_image_container and applies it to the iterated element.
$('.thumbs').each(function( location, element ){
if( $(this).find('.caption').length){
var w = $(this).find('.thumbs_image_container')[0].width();
$(this).width(w);
}
});

Thanks Sushanth and Travis, jquery each did the trick, after experimenting this is what I ended up with which does what I was trying to do,
$('li.thumbs').each( function() {
var $divWidth = 0;
$divWidth = $(this).find('img').width();
$(this).find('div.caption').width($divWidth);
});
it turns out it was the width of the image that I needed to match the 'caption' width to.
Thanks for the help

Replace an image at the DOM

i am looking to replace a particular image when i click on it and change it to active image. but then i click on any other image, the clicked image becomes active and the other image becomes inactive again.
the html markup looks like this:
the HTML that i am using is:
<ul id="weeklyPrizeBlockThumb">
<li class="active"> <img src="images/bts/bts_overlay_wp_box_thumbw1.jpg" alt="Week1" id="week1" />
<p class="text"> <span>Gearing Up for School:</span> <span>$100 of Mead® School Supplies!1</span></p>
</li>
<li> <img src="images/bts/bts_overlay_wp_box_thumbw2.jpg" alt="Week2" id="week2" />
<p class="text"> <span>Sticking to a Schedule:</span> <span>$100 Gift Card from The Container Store®!</span></p>
</li>
<li> <img src="images/bts/bts_overlay_wp_box_thumbw3.jpg" alt="Week3" id="week3" />
<p class="text"> <span>Doing Lunch:</span> <span>Soft Lunch Bag with $100 of Unilever Products!</span></p>
</li>
</ul>
The JS is:
var src1 = $('ul#weeklyPrizeBlockThumb li').find('img').attr("src").replace("_active.jpg", ".jpg");
$('ul#weeklyPrizeBlockThumb li').find('img').attr("src", src1);
//$('#overlay_wp_weekImg div').find('img').attr("src").replace("_active", "");
var src = $(this).find('img').attr("src").match(/[^\.]+/) + "_active.jpg";
$(this).find('img').attr("src", src);
this is not working correctly. it does not de-active-ate the previous images.

try this~
$(function(){
$("#weeklyPrizeBlockThumb li").each(function(){
var li = $(this);
li.click(function(){
$("#weeklyPrizeBlockThumb>li>img").each(function(index){
$(this).attr("src","images/bts/bts_overlay_wp_box_thumbw"+ (index + 1) +".jpg");
alert($(this).attr("src"));
})
li.find("img").attr("src","images/bts/_active.jpg");
alert(li.find("img").attr("src"));
})
})
})