Geek asks and answers

PHP / JavaScript for dynamically changing image paths

This is my first question, so please ignore the errors, if any.

I have a problem when I serve three alternative layouts to my visitors based on the device on which they are viewing.

Mobile, tablet, and desktop .

My site is in PHP and I use only 280 bytes of JavaScript to determine the width of my visitor’s browser. There is no other JavaScript or any libraries like jQuery, MooTools. I want my site to be very light, which leads to faster page loading speed.

I have a PHP variable with a name $layout, and a value for it is assigned by JavaScript dynamically based on the width of the browser. Three values ​​assigned to them:mobile or tablet or desktop

Now I have links in my xhtml that look like this:

<img src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
<img src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
<img src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">

By default, images are downloaded from a folder cdn/images/desktop.

I am looking for if the value $layoutis equal tablet, then the images should be loaded from the folder cdn/images/tabletand similarly if valur $layoutis mobilethen the images should be loaded from cdn/images/mobile.

The name of the images remains unchanged. These are three different resolutions in three different folders.

Please offer a PHP solution, if possible, in PHP.

Otherwise, offer a simple JavaScript solution (libraries such as jQuery, MooTools from any such)

thank

UPDATE

Joomla CMS, PHP- , , , .

+5
3
$(function(){
        //mobile or tablet or desktop
        var client='<?php echo $layout; ?>'
        if(client=='desktop'){
            //do nothing
        }else if(client=='tablet'){
            $('#image-list img').each(function(){
                $('this').attr('src',$(this).attr('src').replace('desktop','tablet'));  
            });
        }else{
            //mobile
            $('#image-list img').each(function(){
                $('this').attr('src',$(this).attr('src').replace('desktop','mobile'));  
            });
        }
    });

        <div id="image-list">
        <img src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
        <img src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
        <img src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">
    </div>

jQuery

, , lib.

    var client='<?php echo $layout; ?>'
    var list=document.getElementById('image-list');
    var img=list.getElementsByTagName('img');
    for(var i=0;i<img.length;i++){
        //img[i].src=img[i].src.replace('desktop',client);
        img[i].setAttribute('src',img[i].getAttribute('src-data').replace('desktop',client));
    }

.

<img src-data="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
+4

:

<img src="cdn/images/<?php echo $layout; ?>image3.jpg" width="500" height="200" alt="image3">
+1

why don't you use simple javascript to change src image? this may not be the nicest kind of script, but you can do something like this:

xhtml file:

<img id="image1" src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
<img id="image2" src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
<img id="image3" src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">

after javascript finds out exactly which layout it makes:

document.getElementById("image1").src = "cdn/images/" + layout + "/image1.jpg";
document.getElementById("image2").src = "cdn/images/" + layout + "/image2.jpg";
document.getElementById("image3").src = "cdn/images/" + layout + "/image3.jpg";

Is that what you mean?

-3
source

More articles:


All Articles