Dynamically change a css image with jquery -
i need change image in css when button clicked matches slide image.
the slide images populated using list, click through lists , relevant image come up.
here's css images
.hero li:nth-child(1) span { background-image: url('http://image1.jpg'); } .hero li:nth-child(2) span { background-image: url('http://image2.jpg'); } .hero li:nth-child(3) span { background-image: url('http://image3.jpg'); }
here's jquery i've got far
jquery(document).ready(function($) { $(".trigger-wrapper").click(function () { $("#menu-wrapper-left").stop().animate({width: 'toggle'}); $('#hero-container').css('background-image','url(http://dummyimage.com/600x400/000/fff.jpg)'); return false; }); });
but static image , selects 1st image, need run along side slider, ideas?
here's fiddle, slider doesn't work on fiddle moment can see i'm truing achieve. http://jsfiddle.net/h863x/4/
if i've forgotten , need little more info, let me know.
your selector wrong - image applied span
jquery code changing background-image
of #hero-container
.
take image off of span
(last line of css) , should see container changing beneath it.
Comments
Post a Comment