CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Giant
Giant

Reputation: 1649

image gallery make the first image big

i made a carousel iamge from this tutorial and i want the first image to be big and when i click next next the next image will show on the big div as well as when the image is click the image will show in the big div i have tried something like this

$("bigimage_container").ready(function() {
            document.getElementById("bigimage_container").style.background = 'url('+  +') ';
            document.getElementById("bigimage_container").style.backgroundPosition = "center center";
            document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
            document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";
        });

but my problem is how to get the url or the first image then i came up with this

$('#carousel_ul li:first').each(function() {
        alert($(this).attr('src'))
        });

but when the alert show it says undefined..any help is appreciated explain on how to make this or a tutorial will be great..if you know how to make a gallery like this it will be wonderful..making a image gallery like in apple store is really cool..

Update: html

<div id="bigimage_container"></div>
        <div id='carousel_container'>
          <div id='left_scroll'><img src='left.png' /></div>
            <div id='carousel_inner'>
                <ul id='carousel_ul'>
                    <li><a href='#'><img src='1.png' /></a></li>
                    <li><a href='#'><img src='2.png' /></a></li>
                    <li><a href='#'><img src='3.png' /></a></li>
                    <li><a href='#'><img src='4.png' /></a></li>
                    <li><a href='#'><img src='5.png' /></a></li>
                </ul>
            </div>
          <div id='right_scroll'><img src='right.png' /></div>
          </div>

Upvotes: 0

Views: 277

Answers (2)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

img tag is inside li so you have to get it this way:

 alert($('#carousel_ul li:first img').attr("src"));

FIDDLE DEMO

you can set it on div this way:

$("#bigimage_container").css("background-image","url('"+$('#carousel_ul li:first img').attr("src")+"')")

UPDATED FIDDLE

Upvotes: 1

Giant
Giant

Reputation: 1649

document.getElementById("bigimage_container").style.background = 'url('+$('#carousel_ul li:first img').attr("src") +') ';
            document.getElementById("bigimage_container").style.backgroundPosition = "center center";
            document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
            document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";

based on the answer of sir Ehsan Sajjad..it worked for me

Upvotes: 0

Related Questions