Превосходный Goto API onClick - PullRequest
Новая
       17

Превосходный Goto API onClick

0 голосов
/ 02 марта 2012

Я выполняю некоторые исследования по этому вопросу, но, похоже, не могу найти правильный ответ.По сути, я бы хотел, чтобы Supersized загружал разные фоновые изображения для каждой ссылки в меню в верхней части моего примера здесь .Другими словами, для каждого пункта меню я хотел бы загрузить свой фон.

Вот моя разметка: 

<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.6.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.js"></script>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
       $("body").addClass("has-js");
        $("form").bind("submit",function(event){
           event.preventDefault();
        });
       $("#banner a").bind("click",function(event){
           event.preventDefault();
           var target = $(this).attr("href");
           $("html, body").stop().animate({
               scrollLeft: $(target).offset().left,
               scrollTop: $(target).offset().top
           }, 1200);
       });
    });
</script>

<script type="text/javascript">

            jQuery(function($){

                $.supersized({
                // Functionality
                    random: 1,
                    slide_interval:3000,
                    transition: 6,
                                    transition_speed        :   1000,

// Slideshow Images
                                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},  
                                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                                                                                                        ],                                          

                });

            });

            $("#newsletter").click(function(){ api.goTo(2); });                 

</script>



    </head>
    <body>
        <div id="banner">
                <ul>
                    <li>
                        <a href="#home">Home</a>
                    </li>  
                    <li>   
                        <a href="#newsletter">Newsletter</a>
                    </li>  
                    <li>   
                        <a href="#directions">Directions &amp; Opening Hours</a>
                    </li>  
                    <li>   
                        <a href="#contact">Contact us</a>
                    </li>
                </ul>
        </div>

Ответы [ 3 ]

0 голосов
/ 10 марта 2012

Надеюсь, этот файл поможет вам, это небольшой учебник, который я сделал для загрузки изображений (Изменить галерею изображений) с помощью ajax / mysql / php с Supersized / Jquery

http://www.mediafire.com/?3hvw7ybic551w8b

Hopeпомогает тебе.

0 голосов
/ 11 марта 2014

Что-то вроде этого должно работать, вы должны передать номер изображения, которое хотите загрузить 

<a href="#" class="link_class01"><span>Menu Item 1</span></a>
<a href="#" class="link_class02"><span>Menu Item 2</span></a>

$(".link_class01").click(function(){
api.goTo(1);
});
$(".link_class02").click(function(){
api.goTo(2);
});
0 голосов
/ 03 марта 2012

Вам нужно использовать 

$('a[href="#newsletter"]').click(function(){
    api.goTo(2); 
});

, чтобы получить элемент <a href="#newsletter">.

...