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

JQuery UI Tabs with IOSSlider causing images not to load #354

Open dv247 opened 9 years ago

dv247 commented 9 years ago

Using the IOSSlider plugin with JQUery UI is causing the slider to not load images when clicking away to another tab then clicking back to the tab where the slider is present.

Here is the code:

<html>
<head id="head">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src = "/jquery.iosslider.min.js"></script>
<link href="/iosSlider.css" media="all" rel="Stylesheet" type="text/css" />
<style>
.ui-tabs .ui-tabs-hide {display: none !important; }
</style>
<script>
    $(document).ready(function () {

        $("#col").tabs({
            fx: { opacity: 'toggle' }
        });

        $('.iosSlider').iosSlider({
            scrollbar: true,
            snapToChildren: true,
            desktopClickDrag: true,
            infiniteSlider: true,
            autoSlide: true,
            autoSlideTimer: 2500,
            navSlideSelector: $('.iosSliderThumbs .thumb'),
            scrollbarHeight: '2',
            scrollbarBorderRadius: '0',
            scrollbarOpacity: '0.5',
            onSlideChange: slideContentChange,
            onSliderLoaded: slideContentChange,
            keyboardControls: true
        });

        function slideContentChange(args) {

            /* indicator */
            $('.iosSliderThumbs .thumb').removeClass('selected');
            $('.iosSliderThumbs .thumb:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
        }
    });
</script>
</head>
<body>
    <div id="col">
        <div id="tabMenu">
            <ul>
            <li><a href="#tabs-1">tab 1</a></li>
            <li><a href="#tabs-2">tab 2</a></li>
            <li><a href="#tabs-3">tab 3</a></li>
            </ul>
        </div>
        <div id="tabs-1">
            <div class = 'iosSlider'>
                <div class = 'slider'>
                    <div class = 'item' id = 'item1' style="background: url(/1.jpg) no-repeat 0 0;"></div>
                    <div class = 'item' id = 'item2' style="background: url(/2.jpg) no-repeat 0 0;"></div>
                    <div class = 'item' id = 'item3' style="background: url(/3.jpg) no-repeat 0 0;"></div>
                </div>
            </div>
            <div class = 'iosSliderThumbs'>
                <div class = 'thumb' id = 'item1' style="background: url(/1thumb.jpg) no-repeat 0 0;"></div>
                <div class = 'thumb' id = 'item2' style="background: url(/2thumb.jpg) no-repeat 0 0;"></div>
                <div class = 'thumb' id = 'item3' style="background: url(/3thumb.jpg) no-repeat 0 0;"></div>
            </div>
        </div>
        <div id="tabs-2">
            tab 2 text
        </div>
        <div id="tabs-3">
            tab 3 text
        </div>
    </div>
</body>
</html>

Is there a setting to fix this or any other solution?

marcwhitbread commented 9 years ago

Most likely has nothing to do with jQuery UI. When you initialize the slider in a hidden element it wont be able to calibrate properly. When you switch to the tab with iosslider in it, call the update method to recalibrate.

dv247 commented 9 years ago

Do you mean this?

$('.iosSlider').iosSlider('update');
marcwhitbread commented 9 years ago

Yes

dv247 commented 9 years ago

This works but is stuck on the last slide that was showing. The carousel no longer runs when tab 1 is clicked.

dv247 commented 9 years ago

Adding the following after the update seems to kick-start the carousel:

$('.iosSlider').iosSlider('goToSlide', 0);