Reputation: 1078
I am trying to load a dynamic sidebar based on the browser view-port. How can I replace a particular word of image path with jQuery variable?
My code:
body>
<div id="wrapper">
<div id="aside"> </div>
<div id="content">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<p><img src="img/bar-0/sample.jpg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet justo vel diam interdum posuere. <img src="img/bar-0/sample1.jpg">Aliquam erat volutpat. Nulla sed libero nunc. Cras in lacus in dolor feugiat scelerisque nec id nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet justo vel diam interdum posuere. Aliquam erat volutpat. <img src="img/bar-0/sample2.jpg">Nulla sed libero nunc. Cras in lacus in dolor feugiat scelerisque nec id nisi.<img src="img/bar-0/sample2.jpg"></p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var curwidth, script, prevclass;
function reloadBars(width) { var newclass
width = parseInt(width, 10);
newclass = ""
if (width < 801 && (curwidth == -1 || curwidth > 800)) {
newclass = 'bar-0';
bar = '800.php';
} else if ((width > 800 && width < 1201) && (curwidth < 800 || curwidth > 1201)) {
newclass = 'bar-1';
bar = '1000.php';
} else if ((width > 1200 && width < 1601) && (curwidth < 1200 || curwidth > 1601)) {
newclass = 'bar-2';
bar = '1200.php';
} else if (width > 1600 && curwidth < 1600) {
newclass = 'bar-3';
bar = '1600.php';
} else {
return;
}
$.ajax({
type: "POST",
url: bar,
data: {},
success:
function(response) {
$('#aside').html(response);
$('#aside').addClass(newclass);
$("#aside").removeClass(prevclass);
$("img").each(function() {
var src = $(this).attr('src');
src = src.replace(prevclass, newclass);
$(this).attr('src', src);
});
prevclass = newclass;
},
error: function(e) {
alert("UH OH! Error!");
}
});
curwidth = width;
}
prevclass = ""
curwidth = -1;
reloadBars($(this).width());
$(window).resize(function() {
reloadBars($(this).width());
});
});
</script>
</body>
Here in particular I want to replace bar-0
wherever it appears in <img>
, with the variablenewclass
value. I am trying to achieve that by using this code as shown above:
UPDATE : It gives an error:
"NetworkError: 404 Not Found - http://localhost/final/bar-1img/bar-0/sample1.jpg"
Ideally the path should be http://localhost/final/img/bar-1/sample1.jpg
It should replace bar-0
but it is appending before the img/
.
Upvotes: 0
Views: 711
Reputation: 660
The complete answer to this depends on the starting text. But you will most definitely want to employ the prevclass and newclass again.
//do this after the $.ajax portion of the reloadBars() function. Remove the previous call of prevclass = newclass and place it after the following code.
$("img").each(function() {
var src = $(this).attr('src')
src = src.replace(prevclass, newclass)
$(this).attr('src', src)
})
prevclass = newclass
Upvotes: 1
Reputation: 41
What you need to replace is the 'src' attribute, not the content. Try with this:
$("img").each(function() {
var src = $(this).attr('src');
src = src.replace("bar-0", newclass);
$(this).attr('src', src);
});
Upvotes: 0