从外部页面链接到具有Supersized的特定幻灯片 [英] link from external page to a specific slide with Supersized
问题描述
无论如何，是否可以从我网站的另一个页面链接到超大画廊中的特定图像.我有一个主页，其中包含与超大图库中的图像相对应的多个缩略图.有没有一种方法可以链接每个缩略图，以便当它转到超大页面时位于正确的幻灯片上?
Is there anyway to link to a specific image in a supersized gallery from another page in my site. I have a homepage with multiple thumbnails corresponding to images in the supersized gallery. Is there a way to link each thumbnail so that when it goes to the supersized page it is on the correct slide?
这就是我在超大页面中放置脚本的方式
This is how I have the script in the supersized page
<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>
如何链接其他页面的图像?
How to link image from another page ?
推荐答案
要动态添加图像，请使用api.options.slides数组和api._build();
To add image on the fly use api.options.slides array and api._build();
例如:
api.options
.slides.push({image: "http://placehold.it/350x150",title: "TEST"});
api._build();
请注意，此插件对我来说不太好，因为它会在全局范围内发出声音.
please note that this plugin not looks good for me as it make a noise in global scope.
要转到特定图像，可以使用api.goTo();方法.要从另一个页面链接，您可以使用hashlink:
to goto to specific image you can use api.goTo(); method. to link from another page you can use hashlink:
在另一页上:
<a href="/galery.html#im=15">
初始化后超大:
api.goTo(document.location
.hash
.replace(/^#/,'')
.replace(/im=([0-9]+).*$/,'$1'))
，或者如果您需要在开始时使用它，只需使用start_slide选项:
or if you need to make it on start just use start_slide option :
$.supersized({
// ..... options
start_slide : document.location
.hash
.replace(/^#/,'')
.replace(/im=([0-9]+).*$/,'$1')),
// ..... options
});
这篇关于从外部页面链接到具有Supersized的特定幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
