Jump to content



Recommended Posts

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"
<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 id="menu">

<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>



<style type="text/css">
    /* Page reset */


    /* Setting default text color, background and a font stack */
    background: #f2f2f2;
    font-family:Arial, Helvetica, sans-serif;

/* Gallery styles */

    /* 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 */



    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 <______________________________________________________*/

    /* This is the slide area */

    /* jQuery changes the width later on to the sum of the widths of all the slides. */


    /* This is the container for the thumbnails */


    /* Every thumbnail is a li element */

    /* The inactive state, highlighted on mouse over */
    background:url(img/pic_bg.png) repeat;

    /* The active state of the thumb */
    background:url(img/active_bg.png) no-repeat;

li.act a{

    /* The left-most vertical bar, next to the first thumbnail */
    background:url(img/divider.png) no-repeat right;

li a{
    background:url(img/divider.png) no-repeat right;

a img{

        background-repeat: no repeat;
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" >

    /* 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 */

            alert("Please, fill in width & height for all your images!");
            return false;


    /* 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 */

        var pos = $(this).parent().prevAll('.menuItem').length;

        /* Start the sliding animation */

        /* 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 */

<body bgcolor="#FFFFFF">




Also, here is the website where I got this code (I changed it a little, but not much).





Any ideas?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.