Daniel007 Posted March 8, 2013 Share Posted March 8, 2013 Hey guys, I'm still very much a noob in learning. I need help big time. As you will see, this code is designed to make an apple like slider on a webpage. I'm looking to put the slider part with the thumbnails on the top of it instead of the bottom. Here is what I have: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Welcome To Provision Records</title><div id="main"><div id="gallery"><div id="slides"><div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div><div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div><div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div></div><div id="menu"><ul><li class="fbar"> </li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li></ul></div></div></div> <style type="text/css"> body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ /* Page reset */ margin:0px; padding:0px;}body{ /* Setting default text color, background and a font stack */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif;}/* Gallery styles */#gallery{ /* CSS3 Box Shadow */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; /* CSS3 Rounded Corners */ -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; border:1px solid white; background:url(img/panel.jpg) repeat-x bottom center #ffffff; display:block; margin-left:auto; margin-right:auto; margin-north:auto; max-width: 100%; max-height:100%; height:auto; margin-top:180px; /* The width of the gallery <______________________________________________________*/ width:900px; overflow:hidden;}#slides{ /* This is the slide area */ height:400px; /* jQuery changes the width later on to the sum of the widths of all the slides. */ width:920px; overflow:hidden; }.slide{ float:left;}#menu{ /* This is the container for the thumbnails */ height:45px; }ul{ margin:0px; padding:0px;}li{ /* Every thumbnail is a li element */ width:60px; display:inline-block; list-style:none; height:45px; overflow:hidden;}li.inact:hover{ /* The inactive state, highlighted on mouse over */ background:url(img/pic_bg.png) repeat;}li.act,li.act:hover{ /* The active state of the thumb */ background:url(img/active_bg.png) no-repeat;}li.act a{ cursor:default;}.fbar{ /* The left-most vertical bar, next to the first thumbnail */ width:2px; background:url(img/divider.png) no-repeat right;}li a{ display:block; background:url(img/divider.png) no-repeat right; height:35px; padding-top:10px;}a img{ border:none;}/* THIS IS WHERE MY CODING SITS */ html{ overflow:hidden } body{ background-image:url(); background-repeat: no repeat; background-size:110%; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript" >$(document).ready(function(){ /* This code is executed after the DOM has been completely loaded */ var totWidth=0; var positions = new Array(); $('#slides .slide').each(function(i){ /* Loop through all the slides and store their accumulative widths in totWidth */ positions= totWidth; totWidth += $(this).width(); /* The positions array contains each slide's commulutative offset from the left part of the container */ if(!$(this).width()) { alert("Please, fill in width & height for all your images!"); return false; } }); $('#slides').width(totWidth); /* Change the cotnainer div's width to the exact width of all the slides combined */ $('#menu ul li a').click(function(e){ /* On a thumbnail click */ $('li.menuItem').removeClass('act').addClass('inact'); $(this).parent().addClass('act'); var pos = $(this).parent().prevAll('.menuItem').length; $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450); /* Start the sliding animation */ e.preventDefault(); /* Prevent the default action of the link */ }); $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact'); /* On page load, mark the first thumbnail as active */});</script> </head><body bgcolor="#FFFFFF"></body></html> Also, here is the website where I got this code (I changed it a little, but not much). http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/#comment-1084 Any ideas? Link to comment https://forums.phpfreaks.com/topic/275408-help-with-a-slider/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.