Target slides by z-index and assign class
here is what I am trying to achieve. On this page
http://livinginspace.staging.wpengine.com/ there are four sharing buttons.
First three work perfectly fine, but the houzz works only for one image.
What I am trying to achieve is to dynamicly change the button's href
attribute depending on the current slide, so when you press it you are
sharing the slide that was on the screen when you pressed the houzz
button. As I noticed, all you need to change inside the href of the button
is the image url. Also, the only thing that changes (at least that I've
noticed) is the z-index of the li element inside the slider div. Here are
my steps: //first I am targeting the li with z-index 20
var currLi = $('li').filter(function() {
return $(this).css('z-index') == 20;
});
//then i target the url of the image inside that li
var imgUrl = $(currLi + '>div.slotholder>img').attr('src');
//finally I put the url into the houzz button
$('a.sb_network_button.houzz').attr("href",
"http://www.houzz.com/imageClipperUpload?link=http%3A%2F%2Flivinginspace.staging.wpengine.com%2F&source=button&hzid=4036&imageUrl="
+ imgUrl +
"&title=Product+Title+as+it+will+be+seen+inside+Houzz&ref=http%3A%2F%2Flivinginspace.staging.wpengine.com%2F");
Altogether that is:
jQuery(document).ready(function($) {
var currLi = $('li').filter(function() {
return $(this).css('z-index') == 20;
});
var imgUrl = $(currLi + '>div.slotholder>img').attr('src');
$('a.sb_network_button.houzz').attr("href",
"http://www.houzz.com/imageClipperUpload?link=http%3A%2F%2Flivinginspace.staging.wpengine.com%2F&source=button&hzid=4036&imageUrl="
+ imgUrl +
"&title=Product+Title+as+it+will+be+seen+inside+Houzz&ref=http%3A%2F%2Flivinginspace.staging.wpengine.com%2F");
});
I am pretty new to jquery, and I can't remember all the things I've tried
but I have done everything I can and it still doesn't work. Also, I have
noticed that when I put the code at the very end of the footer, it doesn't
work at all (tried putting alerts, just to test), but when it's in the
header or beginning of footer (before all other scripts) the alerts work,
but I believe the problem might be that the actual li elements that I am
trying to target are not yet created. Please help me with it, I've spent
so many hours trying to figure this out. Thanks a lot
No comments:
Post a Comment