JQuery Cycle + Jcarousel слайд-шоу большие пальцы не загружается? - PullRequest
Новая
       29

JQuery Cycle + Jcarousel слайд-шоу большие пальцы не загружается?

1 голос
/ 18 августа 2010

Я работаю над объединением цикла jquery и jcarousel для создания слайд-шоу. Он отлично работает в Firefox, Chrome и Safari, но в IE миниатюры не загружаются.

Я предполагаю, что это как-то связано с тем, как генерируются изображения в пейджере, а затем jcarousel просто не обрабатывает это в IE, но я не уверен. Мне кажется, что я очень близок к тому, чтобы заставить работать это слайд-шоу, но мне нужно выяснить, почему оно не работает в IE.

Вот HTML-код: 

<!-- PHOTO SLIDESHOW CONTROLS -->                   
    <div id="photo-slideshow-controls">

        <a id="prev-btn" href="#">Prev</a> 
        <a id="next-btn" href="#">Next</a>
        <a id="play" href="#">Play</a> 
        <a id="pause" href="#">Pause</a>

        <div class="clear"></div>

    </div><!--/PHOTO SLIDESHOW CONTROLS -->


    <!-- PHOTO SLIDESHOW -->
    <div id="advanced-slideshow">
        <img src="assets/bridge-towers.jpg" width="593" height="474" alt="Bridge Towers" name="John Doe" />
        <img src="assets/dixie-lan-bbq.jpg" width="632" height="474" alt="BBQ" name="Jane Doe l Associated Press" />
        <img src="assets/downtown-overlook.jpg" width="632" height="421" alt="Overlooking Downtown Kansas City" name="Joel Johns l GardnerEDGE" />
        <img src="assets/downtown-skyline.jpg" width="474" height="219" alt="Downtown Kansas City Skyline" name="Brett Jankord" />
        <img src="assets/liberty-tower.jpg" width="356" height="474" alt="Liberty Tower" name="Steve Hengeli" />
        <img src="assets/plaza-fountain.jpg" width="632" height="468" alt="Plaza Fountain" name="Kevin Wright l GardnerEDGE" />
        <img src="assets/sprint-center.jpg" width="632" height="371" alt="Sprint Center" name="John Doe" />
        <img src="assets/union-station.jpg" width="632" height="416" alt="Union Station at night" name="Jane Doe" />
        <img src="assets/western-auto.jpg" width="632" height="474" alt="Western Auto" name="Kevin Wright l GardnerEDGE" />
        <img src="assets/bridge-towers.jpg" width="593" height="474" alt="Bridge Towers" name="John Doe" />
        <img src="assets/dixie-lan-bbq.jpg" width="632" height="474" alt="BBQ" name="Jane Doe l Associated Press" />
        <img src="assets/downtown-overlook.jpg" width="632" height="421" alt="Overlooking Downtown Kansas City" name="Joel Johns l GardnerEDGE" />
        <img src="assets/downtown-skyline.jpg" width="474" height="219" alt="Downtown Kansas City Skyline" name="Brett Jankord" />
    </div><!--/PHOTO SLIDESHOW -->


    <div id="photo-credit"></div>


    <ul id="mycarousel" class="jcarousel-skin-tango">
    </ul>

    <div class="clear"></div>


    <div id="slideshow-caption"></div>

Таким образом, цикл перемещает imgs в div # advanced-slideshow, а затем создает миниатюрный пейджер на основе этих изображений в ul # mycarousel. Затем jcarousel использует элементы списка в ul # mycarousel для построения карусели. Работает как шарм в FF, Chrome, Safari, но я не могу понять, как заставить его работать в IE.

Вот код JS:

$ (документ) .ready (function () {

// Adds ability to link to specifics slides    
var index = 0, hash = window.location.hash;
if (hash) {
    index = /\d+/.exec(hash)[0];
    index = (parseInt(index) || 1) - 1; // slides are zero-based
}

// Setup for Cycle Plugin
$('#advanced-slideshow').cycle({ 
prev:   '#prev-btn', 
next:   '#next-btn', 
timeout: 0, 
before: onBefore,
startingSlide: index,
pager:  '#mycarousel', 
    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="75" height="75" /></a></li>'; 
    } 
}); 



//Pauses slideshow
$('#pause').click(function() { $('#photo-slideshow').cycle('pause'); return false; });

//Instantly resumes slidesshow
$('#play').click(function() { $('#photo-slideshow').cycle('resume', true); });


/* Delayed resumes slideshow
$('#play').click(function() { $('#photo-slideshow').cycle('resume'); return false; });
*/




function onBefore(curr,next,opts) {


    // Centers the image
    var $slide = $(next);
    var w = $slide.outerWidth();
    var h = $slide.outerHeight();
    $slide.css({
        marginTop: (476 - h) / 2,
        marginLeft: (634 - w) / 2
    });


    // Centers the DIV vertically!!!!   
    var divHeight = 476;
    var theImageHeight = $slide.outerHeight();
    var newTopMargin = (divHeight - theImageHeight) / 2;
    if(theImageHeight > 476){
        $('#advanced-slideshow').css({
            marginTop: newTopMargin
        });
    }


    // Adds caption and credit line
    $('#photo-credit').html('<p>' + "Photo By: "  + this.name + '</p>') 

    $('#slideshow-caption').html(this.alt); 


    // Adds ability to link to certain slides
    {window.location.hash = opts.currSlide + 1;}


};


//jCarousel 
$('#mycarousel').jcarousel({
    scroll: 5,
    visible: 5,
});

}); // КОНЕЦ

Вот ссылка на то, что я имею до сих пор. Демо

Любая помощь по этому вопросу будет принята с благодарностью!

1 Ответ

0 голосов
/ 25 августа 2010

Пользователь на форумах jquery указал, что у меня есть дополнительная информация, мне нужно было изменить visbile: 5, на visible: 5

Это отлично работает, и теперь слайд-шоу работает в IE.Я тестировал IE 6 - IE 8. Он лучше работает в IE, если вы используете JS-код в заголовке, а не в конце страницы.Я думал, что поделюсь этим на случай, если кто-то еще захочет использовать это.

...