CODEWITHSUNDEEP
jquerystringimagepathreplace
Vikram Rao
Vikram Rao

Reputation: 1078

jQuery to replace image paths across the page based on browser viewport

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

Answers (2)

Michael Wheeler
Michael Wheeler

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

jero
jero

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

Related Questions