Search the Community
Showing results for tags 'apple'.
Found 1 result
-
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?
