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"));
})
})
})
Related
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>
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'));
})
Is it possible to change the text "mars-on-newyork" from this links, this is how the links looks like:
<ul>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-red"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-green"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-blue"/>
</a>
</li>
</ul>
This code changes my images only:
function changeIt(objName) {
var obj = document.getElementById(objName);
var objId = new Array();
objId[0] = "newyork";
objId[1] = "paris";
objId[2] = "tokyo";
var i;
var tempObj;
for (i = 0; i < objId.length; i++) {
if (objName == objId[i]) {
obj.style.display = "block";
} else {
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
and here is the rest of the html from which the java script changes only the pictures:
<div id="newyork">
<a href="#">
<img src="newyork.jpg"/>
</a>
</div>
<div id="paris" style="display:none">
<img src="paris.jpg" border="0" alt="one"/>
</div>
<div id="tokyo" style="display:none">
<img src="tokyo.jpg" border="0" alt="two" />
</div>
<div style="display:none;">
<a id="one" href="#" onclick="changeIt('newyork');"><img src="newyork.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="two" href="#" onclick="changeIt('tokyo');"><img src="tokyo.jpg" border="0" alt="two"/></a>
</div>
If i click on
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
i want the text from the links on the ul to change from this:
href="google.com/finder.php?offer=mars-on-newyork
to this:
href="google.com/finder.php?offer=mars-on-paris
and if i click on
<a id="one" href="#" onclick="changeIt('tokyo');"><img src="paris.jpg" border="0" alt="one"/></a>
it changes it to
href="google.com/finder.php?offer=mars-on-tokyo
i want the java script to work like it does, how it changes the images but i also want to take advantage of the click to change the text.
thanks!
I see how it is now, i guess my post wasn't good enough to have piqued you're interest's, i guess i would have to pay a freelancer to help me, thanks anyways guys for your time and help!
Quick answer to "Is it possible to add or change and id from a link?":
$('#link').attr('id', 'yourNewId'); // Change id
Quick solution to "What I also want is not to just change the images but also the id or link"
$('#link').attr('href', 'yourNewUrl'); // Change link
I'm finding it a little hard to understand what you're trying to do, but...
what i also want is not to just change the images but also the id or link from the ul list e.g
OK, to change the link, i.e., the href property of all anchor elements in your ul list, assuming the URL has a fixed format and we can just replace whatever comes after the last "-":
// assume objName = "paris" or whatever
$("ul a").attr("href", function(i, oldVal) {
return oldVal.substr(0, oldVal.lastIndexOf("-") + 1) + objName;
});
If you pass the .attr() method a callback function it will call that function for each element and pass the function the current value - you then return the new value.
The elements in question don't seem to have an id at the moment, so I'm not sure what you mean by wanting to change it.
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.