search

iosscripts / iosslider

iosslider is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for use as a content slider, website banner, or image gallery.
http://iosscripts.com/iosslider
432 stars 103 forks source link

Responsive slide images with container #322

Closed levipadre closed 10 years ago

levipadre commented 10 years ago

Hi, How can I use the slider with container and keep the responsive width and height function? (in your examples: /9-Full-Width-Responsive-Height/3-variable-width) Something like that:

<div class = 'responsiveHeight'>        
    <div class = 'inner'>
        <div class = 'iosSlider'>
            <div class = 'slider'>

                <div class= 'item' >
                    <img src = 'http://placehold.it/400x400/ff00cc/' />
                </div>

                <div class= 'item' >
                    <img src = 'http://placehold.it/300x400/ffcc00/' />
                </div>

                <div class= 'item' >
                    <img src = 'http://placehold.it/200x400/ccff00/' />
                </div>

                <div class= 'item' >
                    <img src = 'http://placehold.it/400x400/cc00ff/' />
                </div>

            </div>
        </div>
    </div>
</div>

Just because I need to use another elements around the image (link, title).

Thanks,

marcwhitbread commented 10 years ago

The responsiveness is defined in the CSS, the plugin supports this functionality but doesn't resize elements proportionally for you. What are you trying to do?

levipadre commented 10 years ago

I would like the place a text over the image: This is your example:

<div class = 'responsiveHeight'>        
    <div class = 'inner'>
        <div class = 'iosSlider'>
            <div class = 'slider'>
                    <img src = 'http://placehold.it/400x400/ff00cc/' />         
                    <img src = 'http://placehold.it/300x400/ffcc00/' />
                    <img src = 'http://placehold.it/200x400/ccff00/' />
                    <img src = 'http://placehold.it/400x400/cc00ff/' />

            </div>
        </div>
    </div>
</div>

and I would like to change to this:

<div class = 'responsiveHeight'>        
    <div class = 'inner'>
        <div class = 'iosSlider'>
            <div class = 'slider'>

                <div class= 'item' >
                    <span>Title 1</span>
                    <img src = 'http://placehold.it/400x400/ff00cc/' />
                </div>

                <div class= 'item' >
                    <span>Title 2</span>
                    <img src = 'http://placehold.it/300x400/ffcc00/' />
                </div>

                <div class= 'item' >
                    <span>Title 3</span>
                    <img src = 'http://placehold.it/200x400/ccff00/' />
                </div>

                <div class= 'item' >
                    <span>Title 4</span>
                    <img src = 'http://placehold.it/400x400/cc00ff/' />
                </div>

            </div>
        </div>
    </div>
</div>
marcwhitbread commented 10 years ago

I understand now. Yes, this is purely a CSS change. I'm not going to go into detail about general CSS issues here but you would follow precisely the same setup as any other responsive implementation.

Take the CSS applied to the img and apply it to the item elements. Then apply width/height 100% to your img elements. Positioning the span to overlap the img element is trivial (position, top/left offset, z-index).

Side note: you will likely run into issues with the item elements not being able to determine the variable width of the images within. So you may need to initialize in a $(window).load() in stead of a $(document).ready() to avoid the load timing issue.