Два сценария jquery конфликтуют - PullRequest
Новая
       0

Два сценария jquery конфликтуют

3 голосов
/ 24 августа 2011

У меня есть проблема с добавлением скрипта лайтбокса на мой сайт, потому что я использую код из этого урока http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/ в начале моего сайта, поэтому он загружает анимацию при входе на сайт, однако `

$(document).ready(function(){

    // Calling our splashScreen plugin and
    // passing an array with images to be shown

    $('#promoIMG').splashScreen({
        textLayers : [
            'img/thinner.png',
            'img/more_elegant.png',
            'img/our_new.png'
        ]
    });
});

Приведенный выше код отменяет все, что я использую, из скрипта лайтбокса, найденного здесь: http://leandrovieira.com/projects/jquery/lightbox/#

Как мне заставить их работать вместе?

Я добавляю их в свой заголовок следующим образом (он в WordPress): 

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Javascript/jquery.splashscreen.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Javascript/script.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Javascript/lightbox/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/Javascript/lightbox/css/jquery.lightbox-0.5.css" media="screen" />

    <script type="text/javascript">

    $(function() {
        $('#sidebar-menu a').lightBox();
    });
    </script>

Любые предложения подойдут!

1 Ответ

3 голосов
/ 24 августа 2011

Вы должны добавить обратный вызов в плагин заставки, чтобы инициализировать лайтбокс после его завершения.

обратный вызов должен быть выполнен для события click, которое закрывает всплеск 

 splashScreen.click(function(){
    console.log('click event');
    splashScreen.fadeOut('slow', function(){
        console.log('callback 1');
        if(settings.finished != null) settings.finished();
    });    
});

затем передать обратный вызов при создании объекта 

$('#promoIMG').splashScreen({
    textLayers : [
        'img/thinner.png',
        'img/more_elegant.png',
        'img/our_new.png'
    ],
    finished: function(){
         console.log('callback 2');
         $('#sidebar-menu a').lightBox();                 
    }
});

РЕДАКТИРОВАТЬ добавить condole.log, чтобы увидеть, какой код на самом деле достигнут.

...