从外部页面链接到一个特定的幻灯片与超大

问题描述:

是否有任何链接到我的网站从另一个页面的超大型画廊中的特定图像。我有一个主页,其中包含多个缩略图,对应于超大型图库中的图像。有没有办法链接每个缩略图,以便当它到达超大页面时,它位于正确的幻灯片上?从外部页面链接到一个特定的幻灯片与超大

这是我怎么有脚本的超大型页

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

如何从另一友情链接的图像?

+0

想要在初始化后添加图像吗? –

+0

如果我在主页上并单击了slide-link-15的缩略图,我希望当超级大的页面打开而不是从slide-link-01开始时直接滑动到slide-link-15。 – user1873142

+0

啊,你想检测它从网址? –

要动态添加图像使用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 
}); 
+0

这似乎正是我正在寻找的! Thankyou我今天会尝试一下! – user1873142