CSS Replace Image by accessing image URL

Question

I have a banner which is scrolling multiple images using MD-Slider module (JCarousel). The website is responsive hence there would be 3 different layouts of any image inside the banner:

Normal Resolution: Normal Mode

Layout for iPads and bigger tablets: Smaller Resolution - iPad

Layout for Mobile: Mobile layout

Currently I have used temporary images in the banner in the following fashion:

banner1.jpg
banner1-iPad.jpg
banner1-mobile.jpg

So, "banner1" is the key here. This is how my div looks for normal layout:

<div class="md-slide-item slide-1" data-timeout="8000" data-thumb="http://xxxxxxxxxx.com/TestWebsite/sites/default/files/styles/md_slider_1_thumb/public/banner1.jpg?itok=y4RT2g4r" style="height: 268px; left: 0px; top: 0px; opacity: 1; display: block;">
    <div class="md-mainimg">
        <img class = "mdslider-img-tag" src="http://xxxxxxxxxx.com/TestWebsite/sites/default/files/banner1.jpg" alt="" style="width: 100%; height: auto; top: -59.3653846153846px; left: 0px;">
    </div>
        <div class="md-objects" style="font-size: 99%;">
        </div>
</div>

I can use the class mdslider-img-tag to replace the image in CSS using some of the literature mentioned below:

1.https://css-tricks.com/replace-the-image-in-an-img-with-css/

2.http://www.emailonacid.com/blog/details/C13/a_slick_new_image_swapping_technique_for_responsive_emails

However, my problem lies in getting the key "banner1" inside the css before appending -iPad or -mobile part of the text to same so that the right image for the layout is displayed.

Is there an elegant way to achieve this?

As suggested by @sdcr above. You may use media queries instead. It's lighter that way. Hence it would be much easier for you too. — Arvs
– Arvs, Commented Apr 27, 2015 at 4:29
That is what I want to do, but as asked in the question, I would need the image name which is currently displayed by the slider so that I can append "-iPad" or "-mobile" to it so that the slider displays right image. — Raj Pawan Gumdal
– Raj Pawan Gumdal, Commented Apr 27, 2015 at 5:02
There is no way to do this with just css, unfortunately. A combination of the attr() and url() CSS functions would be ideal for this, but they aren't implemented in a way to solve this problem yet. — Stephan Muller
– Stephan Muller, Commented Apr 27, 2015 at 11:39

Daniel Waters · Accepted Answer · 2015-07-14 14:50:22Z

1

Take a look at Interchange by Zurb, this works independent of Foundation themes but works best with them.

http://foundation.zurb.com/docs/components/interchange.html

While not a CSS solution I think this would actually be your best solution rather than creating a less than ideal CSS hack, CSS just isn't able to do what you want yet.

answered Jul 14, 2015 at 14:50

Daniel Waters

4314 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Replace Image by accessing image URL

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related