0

I've been doing some research on this issue but can't quite seem to find the right answer. Basically, I'd like for Supersized to load a different background image for each link at the menu on the top of my example here. In other words, for each menu-item, I'd like to load a different background.

Here's my markup: 

<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>
Community
  • 1
  • 1
cassettenova
  • 9
  • 2

3 Answers3

0

Something like this should work, you have to pass the image number you want to load

<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);
});
jdboo
  • 11
  • 3
0

You need to use 

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

to get the <a href="#newsletter"> element.

Tim
  • 2,430
  • 19
  • 20
0

Hope this file helps you, its a little tutorial i made for make image loading (Change gallery images) with ajax/mysql/php with Supersized/Jquery

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

Hope helps you.

lickybuay
  • 90
  • 1
  • 7