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>
Related
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
i am using this slideshow made with html and javascript:
http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/
the slideshow works good hovewer the large images are not clickable. It has the property but how to make them work so when i click to a picture to send me to the specific link (the link that i write in href="")
it gets the values from this:
<div class="es-carousel">
<ul>
<li><a href="http://www.google.com">
<img src="images/cityPlaces_images/thumbs/1.jpg" data-large="images/cityPlaces_images/1.jpg" alt="image01"
data-description="From off a hill whose concave womb reworded" />
</a></li>
and it generates in this gallery.js:
var $thumb = $item.find('img'),
largesrc = $thumb.data('large'),
title = $thumb.data('description');
$('<img/>').load( function() {
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
if( title )
$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
You could try including the url associated with each thumb as a data-attribute on the element:
<div class="es-carousel">
<ul>
<li><a href="#">
<img src="images/cityPlaces_images/thumbs/1.jpg" data-large="images/cityPlaces_images/1.jpg" alt="image01"
data-description="From off a hill whose concave womb reworded"
data-url="http://google.co.uk"/>
</a></li>
And update the gallery.js code so that it wraps the img element it creates for the large image when the thumb is clicked with an a tag:
var $thumb = $item.find('img'),
largesrc = $thumb.data('large'),
title = $thumb.data('description');
url = $thumb.data('url');
$('<img/>').load( function() {
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
if( title )
$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
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"));
})
})
})
Okay, so I am in the process of recreating this feature:
http://www.w3.org/html/logo/#the-technology
I current have it so when you click on a link, it will add a class to the image that relates to that link (href="#one" on the <a> and then id="#one" on the <img>), however it is currently not going through each <a> tag and only one. And also it is not removing the class I requested.
Code follows:
JS
$(document).ready(function() {
var container = '#portfolio #text_container';
var img_container = '#portfolio #image_container';
$(container).children('a').bind('click', function() {
var this_attr = $(this).attr('href');
var this_img = $(img_container).find('img').attr('id');
if(this_attr == this_img) {
//$(img_container).find('img').hasClass('current').removeClass('current');
// ^^^ This line isn't working, any ideas? :/
$(img_container + ' img[id*="' + this_attr + '"]').addClass('current');
}
else {
alert(this_img + ' this img');
alert(this_attr + ' this attr');
}
});
});
And the HTML is as follows
<div id="portfolio">
<div id="image_container">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" class="current" id="#one" />
<img src="http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif" alt="" id="#two" />
</div>
<div id="text_container">
Item 1
Item 2
<p id="#one" class="current">A bunch of text!</p>
<p id="#two">The second bunch of text!</p>
</div>
</div>
Please let me know if you need any more information :)
rcravens fixed this with the following code..
JS
$(document).ready(function() {
$('#text_container a').click(function(evt) {
evt.preventDefault();
$('.current').removeClass('current');
var href = $(this).attr('href');
$("." + href).addClass('current');
});
And the HTML..
<div id="portfolio">
<div id="image_container">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" class="one current" />
<img src="http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif" alt="" class="two" />
</div>
<div id="text_container">
Item 1
Item 2
<p class="one current">A bunch of text!</p>
<p class="two">The second bunch of text!</p>
</div>
</div>
My interpretation of what you are trying to do is here:
http://jsfiddle.net/rcravens/wMhEC/
The code is changed a bit. You shouldn't have multiple elements with the same id.
Bob
The reason this isn't working:
if(this_attr == this_img)
is because this_attr is a URL and this_img is an ID attribute value.
I am using a image gallery in WordPress, images are fetching from database and displaying it into front end.
In my case a big image container, and three image thumbnail,
I want, when when i click on the thumbnail of the image the previous image which in container goes fade out and clicked image set in to image container.
My Html Markup
<!--A container Div which have 1st image from the thumbnail-->
<div class="wl-poster">
<a href=#" id="wl-poster-link">
<img id="poster-main-image" src="/wp-content/uploads/2010/09/Ruderatus_farm.jpg">
</a>
</div>
<!--For Thumbnails-->
<div id="wl-poster-thumb">
<ul id="posterlist">
<li class="poster-thumb">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/Ruderatus_farm.jpg" rel="http://www.cnn.com/">
</li>
<li class="poster-thumb">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/3047006581_1eec7f647d.jpg" rel="http://yahoo.com">
</li>
<li class="poster-thumb" style="margin-right: 0pt;">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/lush-summer-louisville-kentucky-wallpapers-1024x768.jpg" rel="http://apple.com">
</li>
</ul>
</div>
Used jQuery
if(jQuery('.homepage-poster').length > 0){ // since this will return a empty
var img_src = jQuery("#wl-poster-thumb ul li:first img").attr('src');
var href_path = jQuery("#wl-poster-thumb ul li:first img").attr('rel');
var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1');
jQuery('.wl-poster img').attr('src',final_src);
jQuery('.wl-poster a').attr('href',href_path );
}
jQuery('#posterlist .poster-thumb img').click(function(){
var href_path = jQuery(this).attr('rel');
var img_src = jQuery(this).attr('src');
var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1');
jQuery('#poster-main-image').remove(function() {
jQuery('a#wl-poster-link').attr('href',href_path);
jQuery('#poster-main-image').attr('src',final_src)..fadeOut('slow').fadeIn('slow');
// $('#img1').fadeOut('slow').remove();
// $('#img1').fadeOut('slow').fadeIn('slow');
});
});
Please help me to solve this issue.
try it with this code:
jQuery('#wl-poster-link').attr('href', href_path);
jQuery('#poster-main-image').fadeOut('slow').attr('src',final_src);
//wait till image has loaded, you could think about a loading-gif laying above your image-container..
jQuery('#loading').show(); //or fadeIn
jQuery('#poster-main-image').load(function() { jQuery('#loading').hide(); jQuery(this).fadeIn('slow'); });
You added a point too much on your chaining. Also, the remove-function is not needed.
You forgot a beginning " on your a#wl-poster-link for the href. Fix this too.