Supersized Goto API onClick
Question
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 answers
solution1
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);
});
solution2
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.
solution3
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
http://www.mediafire.com/?3hvw7ybic551w8b
Hope helps you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.