超大型Goto API onClick
[英]Supersized Goto API onClick
问题描述
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 & Opening Hours</a>
</li>
<li>
<a href="#contact">Contact us</a>
</li>
</ul>
</div>
3 个解决方案
解决方案1
0 2014-03-11 15:07:18
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);
});
解决方案2
0 2012-03-02 20:28:08
You need to use 您需要使用
$('a[href="#newsletter"]').click(function(){
api.goTo(2);
});
to get the <a href="#newsletter"> element. 获取<a href="#newsletter">元素。
解决方案3
0 2012-03-09 22:18:28
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 希望此文件对您有帮助，它是我制作的一个小教程，用于使用Supersized / Jquery用ajax / mysql / php进行图像加载（更改画廊图像）
http://www.mediafire.com/?3hvw7ybic551w8b http://www.mediafire.com/?3hvw7ybic551w8b
Hope helps you. 希望可以帮助您。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.