HELP WITH A SLIDER!

Daniel007 · 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?

Sign In

HELP WITH A SLIDER!

Recommended Posts

Daniel007

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information