New Topic/Question
Reply
Can someone please get me started on the right track?
I was trying out this tutorial:
My link
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=us-ascii" />
<title>Moving Boxes</title>
<link type="text/css" href="movingbox/css/demo.css" media="screen" charset="utf-8" rel="stylesheet" />
<link type="text/css" href="movingbox/css/movingboxes.css" media="screen" charset="utf-8" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript" src="movingbox/js/jquery.movingboxes.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#slider-one').movingBoxes({
startPanel : 4, // start with this panel
wrap : true, // psuedo wrapping - it just runs to the other end
width : 300, // overall width of movingBoxes
imageRatio : 1, // Image ration set to 1:1 (square image)
buildNav : true, // if true, navigation links will be added
navFormatter : function(){ return "●"; } // function which returns the navigation text for each panel
});
$('#slider-two').movingBoxes({
startPanel : 3, // start with this panel
width : 600, // overall width of movingBoxes
panelWidth : .7, // current panel width adjusted to 50% of overall width
imageRatio : 16/9, // Image ratio set to 16:9
buildNav : true, // if true, navigation links will be added
navFormatter : function(index, panel){ return panel.find('h2 span').text(); }, // function which gets nav text from span inside the panel header
});
// Example of how to move the panel from outside the plugin, only works on first selector (Use ID instead of class to target other movingboxes).
// get: var currentPanel = $('.slider').data('movingBoxes').currentPanel(); // returns # of currently selected/enlarged panel
// set: var currentPanel = $('.slider').data('movingBoxes').currentPanel(2); // scrolls to 2nd panel & returns 2.
// Set up demo external navigation links
var i, t = '', len = $('#slider-one .panel').length + 1;
for ( i=1; i<len; i++ ){
t += '<a href="#" rel="' + i + '">' + i + '</a> ';
}
$('.dlinks')
.find('span').html(t).end()
.find('a').click(function(){
$('#slider-one').data('movingBoxes').currentPanel( $(this).attr('rel') );
return false;
});
// Report events to firebug console
$('.slider').bind('initialized initChange beforeAnimation completed',function(e, slider, tar){
// show object ID + event in the firebug console
if (window.console && window.console.firebug){
var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.curPanel
txt += (typeof(tar) == 'undefined') ? '' : ', targeted panel is ' + tar;
console.debug( txt );
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="title">
<a href="http://github.com/chriscoyier/MovingBoxes"><img src="http://www.sitepoint.com/forums/images/movingboxes.png" alt="moving boxes" /></a>
</div>
<br><br>
<div class="dlinks">
Go to Panel: <span></span>
</div>
<br><br>
<!-- Slider #1 -->
<div class="slider" id="slider-one">
<div class="panel">
<img src="http://www.sitepoint.com/forums/images/1.jpg" alt="picture" />
<h2>News Heading</h2>
<p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
</div>
<div class="panel">
<img src="http://www.sitepoint.com/forums/images/2.jpg" alt="picture" />
<h2>News Heading</h2>
<p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
</div>
<div class="panel">
<img src="http://www.sitepoint.com/forums/images/3.jpg" alt="picture" />
<h2>News Heading</h2>
<p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
</div>
<div class="panel">
<img src="http://www.sitepoint.com/forums/images/4.jpg" alt="picture" />
<h2>News Heading</h2>
<p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
</div>
<div class="panel">
<img src="http://www.sitepoint.com/forums/images/5.jpg" alt="picture" />
<h2>News Heading</h2>
<p>A very short exerpt goes here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
</div>
<div class="panel">
<img src="http://www.sitepoint.com/forums/images/6.jpg" alt="picture" />
<h2>News Heading</h2>
<p>A very short exerpt goes here... <a href="#">more</a></p>
</div>
<div class="panel">
<img src="http://www.sitepoint.com/forums/images/7.jpg" alt="picture" />
<h2>News Heading</h2>
<p>A very short exerpt goes here... <a href="#">more</a></p>
</div>
</div> <!-- end Slider #1 -->
<br><br>
<!-- Slider #2 (images of slider #1 reversed) -->
<div class="slider" id="slider-two">
<div class="panel">
<img src="http://www.sitepoint.com/forums/images/5.jpg" alt="picture" />
<h2>News Heading - <span>Lisa</span></h2>
<p>A very short exerpt goes here... <a href="http://flickr.com/photos/fensterbme/499006584/">more</a></p>
</div>
<div class="panel">
<img src="http://www.sitepoint.com/forums/images/4.jpg" alt="picture" />
<h2>News Heading - <span>Monica</span></h2>
<p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
</div>
<div class="panel">
<img src="http://www.sitepoint.com/forums/images/3.jpg" alt="picture" />
<h2>News Heading - <span>Lin</span></h2>
<p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
</div>
<div class="panel">
<img src="http://www.sitepoint.com/forums/images/2.jpg" alt="picture" />
<h2>News Heading - <span>Shiela</span></h2>
<p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a></p>
</div>
<div class="panel">
<img src="http://www.sitepoint.com/forums/images/1.jpg" alt="picture" />
<h2>News Heading - <span>Joanne</span></h2>
<p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
</div>
</div>
<br><br>
</div> <!-- end wrapper -->
</body>
</html>
MultiQuote
| 