0

とにかく、私のサイトの別のページから特大ギャラリーの特定の画像にリンクすることはできますか? 特大ギャラリーの画像に対応する複数のサムネイルを含むホームページがあります。各サムネイルをリンクして、特大サイズのページに移動したときに正しいスライドに表示されるようにする方法はありますか?

これが、特大ページにスクリプトを配置する方法です

  <script type="text/javascript">

        jQuery(function($){

            $.supersized({

                // Functionality
                slideshow               :   1,          // Slideshow on/off
                autoplay                :   1,          // Slideshow starts playing automatically
                start_slide             :   1,          // Start slide (0 is random)
                stop_loop               :   0,          // Pauses slideshow on last slide
                random                  :   0,          // Randomize slide order (Ignores start slide)
                slide_interval          :   3000,       // Length between transitions
                transition              :   6,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1000,       // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                pause_hover             :   0,          // Pause slideshow on hover
                keyboard_nav            :   1,          // Keyboard navigation on/off
                performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,          // Disables image dragging and right click with Javascript

                // Size & Position                         
                min_width               :   0,          // Min width allowed (in pixels)
                min_height              :   0,          // Min height allowed (in pixels)
                vertical_center         :   1,          // Vertically center background
                horizontal_center       :   1,          // Horizontally center background
                fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
                fit_portrait            :   1,          // Portrait images will not exceed browser height
                fit_landscape           :   0,          // Landscape images will not exceed browser width

                // Components                           
                slide_links             :   'name', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                thumb_links             :   1,          // Individual thumb links for each slide
                thumbnail_navigation    :   0,          // Thumbnail navigation
                slides                  :   [           // Slideshow Images
                {image : 'images/4change.jpg', title : 'slide-link-01', thumb : '', url : '' },
                {image : 'images/a1.jpg', title : 'slide-link-02', thumb : '', url : '' },
                {image : 'images/amplifon1.jpg', title : 'slide-link-03', thumb : '', url : '' },
                {image : 'images/amplifon2.jpg', title : 'slide-link-04', thumb : '', url : '' },
                {image : 'images/brain1.jpg', title : 'slide-link-05', thumb : '', url : '' },
                {image : 'images/brain2.jpg', title : 'slide-link-06', thumb : '', url : '' },
                {image : 'images/britishhandball.jpg', title : 'slide-link-07', thumb : '', url : '' },
                {image : 'images/britishhandball2.jpg', title : 'slide-link-08', thumb : '', url : '' },
                {image : 'images/cord.jpg', title : 'slide-link-09', thumb : '', url : '' },
                {image : 'images/crossborder1.jpg', title : 'slide-link-10', thumb : '', url : '' },
                {image : 'images/crossborder2.jpg', title : 'slide-link-11', thumb : '', url : '' },
                {image : 'images/guiness1.jpg', title : 'slide-link-12', thumb : '', url : '' },
                {image : 'images/guiness2.jpg', title : 'slide-link-13', thumb : '', url : '' },
                {image : 'images/harambee.jpg', title : 'slide-link-14', thumb : '', url : '' },
                {image : 'images/lifetracks.jpg', title : 'slide-link-15', thumb : '', url : '' },
                {image : 'images/missimo.jpg', title : 'slide-link-16', thumb : '', url : '' },
                {image : 'images/staffordshire.jpg', title : 'slide-link-17', thumb : '', url : '' },
                                             ],

                // Theme Options               
                progress_bar            :   1,
                // Timer for each slide                         
                mouse_scrub             :   0

            });
        });


 </script>

別のページから画像をリンクする方法は?

4

1 に答える 1

1

その場で画像を追加するには、api.options.slides配列とapi._build();を使用します。

例えば：

api.options
      .slides.push({image: "http://placehold.it/350x150",title: "TEST"});
api._build();

このプラグインは、グローバル スコープでノイズを発生させるため、私には見栄えがよくないことに注意してください。

特定の画像に移動するには、api.goTo();メソッドを使用できます。別のページからリンクするには、hashlink を使用できます。

他のページ:

<a href="/galery.html#im=15">

特大サイズの初期化後:

api.goTo(document.location
                   .hash
                    .replace(/^#/,'')
                     .replace(/im=([0-9]+).*$/,'$1'))

または、開始時にそれを作成する必要がある場合は、 start_slideオプションを使用してください：

$.supersized({
            // ..... options 
            start_slide : document.location
                                    .hash
                                     .replace(/^#/,'')
                                      .replace(/im=([0-9]+).*$/,'$1')),  
            // ..... options 
});
于 2012-12-21T05:42:53.823 に答える