We Keep Coding

jQuery get each background image URL of each element and wrap it in a href

So i am trying to get the background-image url of each div that has the class "client" in it. From there I want put that URL into an a href and wrap around another element so i can make it pop in a light box.
I've gotten this far but it only seems to grab the first url and then applies it to all of the elements.
// Make client rotator pop-up and get image url
jQuery(document).ready(function(){
jQuery('.client').each(function(index, el) {
var bgurl = $('.bg-cover').css('background-image');
if(bgurl != 'none') {
bgurl = bgurl.replace('url("','').replace('")','');
jQuery('.client .flex_cell_inner').wrapInner('');
};
});
});
here is the URL to the site. go to our clients section in the homepage near the bottom: http://staging.idgadvertising.com/locationconnection/

Try this. If you're trying to get the background image of each item, you should use $(this) which references the current item in the loop (in this case, each .client div as you loop over them). The way you have it now is referencing a collection of every .client div on the page.
$(document).ready(function(){
$('.bg-cover').each(function(index, el) {
var bgurl = $(this).css('background-image');
if (bgurl != 'none') {
bgurl = bgurl.replace('url("','').replace('")','');
$($('.client .flex_cell_inner')[index]).wrapInner('');
};
});
});

the bgurl will be the same in each iteration, because it is always the same selector .bg-cover if there are many it will always take the first occurance, you say you want the background-image of the .client you can use $(this) to referrence the current element in iteration
var bgurl = $(this).css('background-image');

Change javascript variable in seperate element

I run a WoW guild forum based on php (phpbb), javascript and html. Ever since long, Wowhead allows links to be posted to their item/spell IDs etc. The basic code to the Wowhead JS and it's variables is:
<script src="//static.wowhead.com/widgets/power.js"></script>
<script>var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": true }</script>
There is an extension that puts this code in the footer of every page via a HTML file. Every Wowhead link posted will be converted in a link with a tooltip explaining what it links to. The '"renamelink": true' portion of the wowhead_tooltips variable makes it as such that any link of an item or spell is renamed to the exact name of what it is linked to.
The problem: when I generate custom URLs using a Wowhead link, ie:
Teleport
instead of displaying 'Teleport' with a tooltip of Blink, it will rename the entire URL to Blink with an icon, as described in the wowhead_tooltips variable.
What I want to achieve is:
Any direct URL to Wowhead should be converted into a renamed spell/item.
Any custom URL to Wowhead should be retain it's custom text, but retrieve the tooltip.
This should both be possible on a single page.
The best solution I have come up with is to add an 'if' function to var wowhead_tooltips based on class, then add the class to URLs:
<script>if ($('a').hasClass("wowrename")) { var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": false } }</script>
<a class="wowrename" href="http://www.wowhead.com/spell=1953">Teleport</a>
This works, however, the problem with this solution is that once the script recognizes one URL with the class "wowrename" on the page it will stop renaming all links, meaning that custom URLs and direct URLs can't be mixed on a single page.
Any other solution I've tried, using IDs, defining different variables etc either don't work or come up with the same restriction.
Hence the question, is it possible to change Javascript variables (in this case "var wowhead_tooltips { "renamelinks": false}" per element (URL), based on id, class or anything else?

Direct link that gets renamed with tooltip and iccn.
Teleport
Custom link with tooltip and original text.
I've stored the original link text as a data attribute so we can restore it after it's been changed.
<a class="wowrename" href="http://www.wowhead.com/spell=1953" data-value="Teleport">Teleport</a>
Keep checking for when static.wowhead.com/widgets/power.js changes the last link text. Once changed, restore using the data-value value, remove the styling added that creates the icon and stop the timer.
$(function () {
//timmer
checkChanged = setInterval(function () {
// check for when the last link text has changed
var lastItem = $("a.wowrenameoff").last();
if (lastItem.text() !== lastItem.data('value')) {
$("a.wowrenameoff").each(function () {
//change value
$(this).text($(this).data('value'));
//remove icon
$(this).attr('style', '');
//stop timer
clearInterval(checkChanged);
});
}
i++;
}, 100);
});
This does cause the link icon to flicker on then off, but it is repeated after a page refresh.
JSFiddle demo

This is simple solution. It's not the best way.
var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": true }
$('a').hover(function() {
if ($(this).hasClass('wowrename') {
wowhead_tooltips.renamelinks = true;
}
else {
wowhead_tooltips.renamelinks = false;
}
});
I don't know how exactly wowhead API works, but if wowhead_tooltips variable is loaded exactly in the moment when the user points the link with the mouse (without any timeout) - this can fail or randomly work/not work.
The reason can be that the javascript don't know which function to execute first.
I hope this will work. If it's not - comment I will think for another way.

You have to loop on all the links, like this:
$("a.wowrename").each(function() {
// some code
});

Replace ending on multiple img src

I have 10 buttons each with a different image and text. I have each button to click on/off and if another button is clicked I want the active button to turn off. I am struggling with the latter.
var x = 300;
//port1
$('#port1').click(
function(){
var src = $('.image', this).attr('src');
//var srcs = $(this).attr('src');
if($(this).hasClass("highlight")) {
$('.butt').removeClass('highlight');
$('.image', this).attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1'));
$('.p1').fadeOut(x);
}
else{
$('.butt').removeClass('highlight');
// $('.butt').attr('src').replace('_dark.png', '_light.png');
$('.butt img').each(function() {
var src2 = $('.image').attr('src').replace(/_dark(\.[^.]+)?$/, '_light$1');
$('.image').attr('src', src2);
});
$('.talk').fadeOut(x);
$(this).addClass('highlight');
$('.image', this).attr('src', src.replace(/_light(\.[^.]+)?$/, '_dark$1'));
$('.p0').fadeOut(x);
$('.p1').fadeIn(x);
}
});
The problem I am running into is that when I click the button, it changes the src on all the other buttons to be exactly the same as this one and does not just change the ending on the other sources to '_dark'. I thought adding this 'each' function would help and it did not.
Edit: I am new to coding but i attempted a jsfiddle: http://jsfiddle.net/messedUP90/yxjoxe41/
The random computers that appear was the effect I am going for and the code I wrote to do it before I remembered that each icon was going to be different. Look at the first button titled "un" for where the error I am talking about happens.

http://jsfiddle.net/gtf1dk0m/1/
You need to re-set the variable src.
This code does it:
$('.butt').each( function( index ) {
if ( $(this).attr('src') ) {
$(this).attr('src', $(this).attr('src').replace(/_dark(\.[^.]+)?$/, '_light$1'));
}
});
ignore the fact that the image does not change color in the jsfiddle. it works in dreamweaver. :)

There is some strange code and naming conventions in this function... such as var src = $('.image', this).attr('src');... theres a lot unexplained by the question asked here and with no jsfiddle it's hard to imagine what you mean or see what HTML elements you're using...
so I will try to answer based on purely your description and not your code.
If you want to remove all instances of a class such as an active class you could simply do an each function however your later comments about it changing all other image sources once clicked is in this line $('.image').attr('src', src2);. You have effectively targeted all images under the class .butt which seems to be all of your images. Perhaps what you want is actually to iterate over all elements and remove the active state such as...
$(".butt img").each(function() {
//Remove Active Classes
if($(this).hasClass("activeImage")) {
$(this).removeClass("activeImage");
}
});
Then you are now free to take the clicked button and add its active state in...
$(".buttons").each(function() {
$(this).click(function() {
//Old Code
$(".butt img").each(function() {
//Remove Active Classes
if($(this).hasClass("activeImage")) {
$(this).removeClass("activeImage");
}
});
//New Code
$(this).addClass("activeImage");
});
});
Then in your CSS you could make sure that you have a rule like
.activeImage {
background-image: url("blah.png") !important;
/* You Get The Idea */
}

Adding image to a div using JQuery

I'm trying to create a poker web app using an poker library (http://tairraos.github.io/Poker.JS/)
One of the methods to render a card image is using this function:
getCardImage: function(size, suit, point) {
var image = document.createElement('img');
image.src = this.getCardData(size, suit, point);
return image;
},
It creates an image using canvas and places inside an img tag. I've been trying to place it inside a div, like:
$('#flop').append(Poker.getCardImage(60, 'hearts', 'j'));
but to no avail. The only way it renders normally is using:
document.body.appendChild(Poker.getCardImage(100, 'h', 'Q'));
I really run off of ideas of how to pull this out. I've tried many JQuery methods and nothing worked. I see on the network tab of chrome that the image is created using a base64, but when I try to place it inside a div, nothing appears. Only if appends to the end of the body.
Can someone lend me a help here?
tnx

I think you should just have to change your getCardImage function to return a jQuery Element instead of an HTML element. Try this:
getCardImage: function(size, suit, point) {
var image = '<img src="' + this.getCardData(size, suit, point) + '" />';
return $(image);
}
Then your jQuery append should work:
$('#flop').append(Poker.getCardImage(60, 'hearts', 'j'));

Changing the image source (and back again) of a group of <img> tags with javascript

I have a group of image tags (around 30) that I need to change the source of depending on the value of a variable.
How can I quickly and easily do this without writing a different function for each one?
Obviously I can easily change each one with something like
$('#imagethatneedschanging').attr('src', 'alternateimage.png');
But when do that how can I then revert to the original src without writing the opposite and for each and every image tag?

First of all, give them all a class so that you can reference all the images as a group, rather than individually by ID.
This function would do what you need...
function setImageSrc(src) {
$("img.yourClass").attr("src", function() {
if (src == "") {
return $(this).data("original-src");
}
else {
$(this).data("original-src", this.src);
return src;
}
});
}
You can then call it like this to set all the images...
setImageSrc("alternateimage.png");
That would set the images to show the alternative image, and also store the original src value on each image element. You could then revert them all back to the original by calling the same function, but like this...
setImageSrc("");

You can use jQuery each to iterate through the images and use a data attribute for the original image
var original = false;
$( "img" ).each(function( index ) {
if(!original){
$(this).data('orig', $(this).data('src'));
$(this).attr('src', 'alternateimage.png');
}
else{
$(this).attr('src', $(this).data('orig'));
}
});
https://api.jquery.com/each/
http://api.jquery.com/data/