2012-03-02 10 views
0

この問題に関してはdoingsomeresearchでしたが、正しい答えが見つからないようです。基本的には、Supersizedが私の例の上部にあるメニューで各リンクの異なる背景イメージをロードするようにしたいと思います。here言い換えれば、各メニュー項目に対して、私は異なる背景をロードしたいと思います。あなたは<a href="#newsletter">要素を取得するために超大型API onClick

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

を使用する必要が

<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> 

答えて

0

は、ここに私のマークアップです。特大サイズ/ jQueryを使ってAJAX/mysqlの/ PHPで

0

希望、このファイルは、あなたが、私が作るの画像の読み込み(変更のギャラリー画像)のために作られたその小さなチュートリアルを助け

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

希望はあなたを助けます。

0

このような何かはあなたが

<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); 
}); 
をロードしたい画像番号を渡す必要があり、動作するはずです
関連する問題