CODEWITHSUNDEEP
jquery-mobilecarousel
Venugopal
Venugopal

Reputation: 1896

Carousel in jQuery mobile

http://andrebrov.net/dev/carousel/

the above link shows some slide example using carousel.

      var carousel  = new $.widgets.Carousel( {

            uuid : "carousel",

            args : { "scrollInterval" : 600,"itemWidth":290
            },
                value : [
                        { "title" : "Tron.Legacy",
                          "image" : "images/1.jpg"
                        },
                        { "title" : "Yogi Bear",
                          "image" : "images/2.jpg"
                        },
                        { "title" : "The Chronicles of Narnia: The Voyage of the Dawn Treader",
                          "image" : "images/3.jpg"
                        },
                        { "title" : "The Fighter",
                          "image" : "images/4.jpg"
                        },
                        { "title" : "Tangled",
                          "image" : "images/5.jpg"
                        }
                ]
            });                   
    </script >

In the above code for the value property we are giving title & image attributes. Is there any possibility that we can give a < div > section as input instead of an image so that we can have some text message added to an image or whatever. Please help.

Upvotes: 0

Views: 3837

Answers (3)

Shashant Dahikar
Shashant Dahikar

Reputation: 252

In your carousel template write

<div style="height:100%;font-size:1.5em;width:500px">@{div}</div>

and in carousel values write

"title" : "Tron.Legacy",
"image" : "images/1.jpg",
"div": '<div id="page1">first</div>'

I faced the same issue as u did, but was able to add divs in the carousels. :)

Upvotes: 4

jeschafe
jeschafe

Reputation: 2683

If you want to change it, I looked into the widget code and if you look in this section of carousel.js:

this.applyTemplate = function(obj, _t) {
    for (var i in obj) {
        var token = "@{" + i + "}";
        while (_t.indexOf(token) != -1) {
            _t = _t.replace(token, obj[i]);
        }
    }
    return _t;
};

notice specifically the var token = "@{" + i + "}";

because in the html code there is this section:

<div class="carousel-item">
    <div style="height:2em;font-size:1.5em;padding-bottom:15px;">@{title}</div>
    <div id="carousel_item_@{id}" >
        <div style="float:left;width:100%"><img src="@{image}" /></div>                                                 
    </div>
</div>

If you notice the @{image} and the @{title} are the title and image attributes. So just by browsing the code, I would assume your text will replace "@{something}" in the html. So pretty much you can add a "@{something}" and then add a property to your object going:

{"something":"caption to add",
 "title":"blah",
 "img":"blah.jpg"}

Upvotes: 0

Evgeny Zislis
Evgeny Zislis

Reputation: 6957

The Twitter Bootstrap project has a carousel that accepts divs and whatever markup you want to use.

http://twitter.github.com/bootstrap/javascript.html#carousel

Upvotes: 0

Related Questions