CODEWITHSUNDEEP
jquerynavigation
Mouse Trap
Mouse Trap

Reputation: 11

how to load thumbnails in jquery

hi am designing a vertical navigation on the home page.the first vertical menu is a list of links.each when click should load set of thumbnails vertically parallel to mainmenu list.my issue the jscript load both the thumbnail on page load. it should only the first menu thumbnails.and when the second menu is clicked it should load only the second set of thumbnail.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scroll Menu</title>




<script type="text/javascript" src="../js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../js/jquery.color.js"></script>


<style>



body {
padding:0;
margin:50px;
}



#container{

width: 100%;
font-size: 12px;
top:30;
flot:center;
overflow: hidden; /* contain floated elements */
background: #fff }


#mainmenu {

    height:600px;
    overflow:hidden;
    position:relative;
background-color:#ffaa00;

   float: left; 
   width: 10%;



}

#sidebar1 {


margin-top:300;margin-bottom:200;
height:600px;

overflow:hidden;
position:relative;
background-color:#fff;
float: left; 
width: 10%;

}

 #sidebar2 {


    margin-top:300;margin-bottom:200;
    height:600px;

    overflow:hidden;
    position:relative;
    background-color:#fff;
    float: left; 
    width: 10%;

 }    


 #menu1 {

 margin-top:40;




 list-style:none;
 padding:0;
 margin:0;


 position:relative;

 height:100%;
width:30px;

 }

#menu1 li {




padding:10px;

position:relative;

text-align:left;
display:block;
cursor:hand;
cursor:pointer;

}


#menu1 li span {


    height:600px;
font-family:georgia, arial;
font-size:9px;
color:#464646;

}


#menu2 li {




    padding:10px;

    position:relative;

    text-align:left;
    display:block;
    cursor:hand;
    cursor:pointer;

 }


 #menu2 li span {


    height:600px;
    font-family:georgia, arial;
    font-size:9px;
    color:#464646;

 }



 #right1 {
    overflow:hidden;

 float: left; 
 width: 80%;
 position:relative;
 float:right;
 background-color:#fff;


 }

 #right2 {
    overflow:hidden;

    float: left; 
    width: 80%;
    position:relative;
    float:right;
    background-color:#fff;


  }

  </style>
  </head>


  <div id="container">



  <div id = "mainmenu">

    <a href="#"><img src="/Users/blackbook/Downloads/rsz_riot_industries_2_1.jpg"   height=300 width=150 alt="alt text" /></a>

    <ul><a href="javascript:void()" class ="submenu1">Menu1</a></ul><ul><a href="#"class  ="submenu2">MENU2 </a></li></ul>


 </div>


 <div id="sidebar1">

    <ul id="menu1">


        <li><a href="javascript:void()" class="one"><img src="" alt="alt text" /></a></li>
        <li><a href="javascript:void()"class="two"><img src="" alt="alt text" /></a></li>
        <li><a href="javascript:void()" class="three"><img src="" alt="alt text" /></a></li>

        </ul>

   </div>

 <!-- <div id="sidebar2">

        <ul id="menu2">


            <li><a href="javascript:void()" class="four"><img src="" alt="alt text" /></a></li>
            <li><a href="javascript:void()"class="five"><img src="" alt="alt text" /></a></li>
            <li><a href="javascript:void()" class="six"><img src="" alt="alt text" />     </a></li>

        </ul>

    </div>




  <!-- <div id="wrapper">
    <div id="left">
        <p><a href="javascript:void()" class="one">THUMBNAIL #1</a>
        </p>
        <p><a href="javascript:void()" class="two">THUMBNAIL #2</a>
        </p>
        <p><a href="javascript:void()" class="three">THUMBNAIL #3</a>
        </p>
    </div> -->


  <div id="right1">
        <!-- Each div here will contain the text to be show on the right -->
        <div id="textOne" class="text" style="display:block;">
            <h1>menu1 submenu1</h1>

            <p>um. In aliquam dolore qui diisl consequat claritas litterarum. In aliquam dolore qui din aliquam dolore qui diam veniam. Ut exerci ullamcorper ut sit dolor.</p>
        </div>
        <div id="textTwo" class="text">
            <h1>menu1 submenu2</h1>

            <p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p>
        </div>
        <div id="textThree" class="text">
            <h1>menu1 submenu3</h1>

            <p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p>
        </div>
    </div>



     <div id="textFour" class="text">
         <h1>menu2 submenu1</h1>

         <p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p>
     </div>
     <div id="textFive" class="text">
         <h1>menu2 submenu2</h1>

         <p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p>
     </div>
     <div id="textSix" class="text">
         <h1>menu2 submenu3</h1>

         <p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere   claritatem duis anteposuerit aliquip et.</p>
     </div>

  </div>






  <div style="font-size:12px;color:#ccc"></div>


  <script type="text/javascript">




    /*$(document).ready(function() {  */

     $("#mainmenu a.submenu1").click(function () {
                      var colorOver = '#31b8da';
                      var colorOut = '#1f1f1f';
                      var padLeft = '20px';
                      var padRight = '20px';
                      var defpadLeft = $('#menu1 li a').css('paddingLeft');
                      var defpadRight = $('#menu1 li a').css('paddingRight');      
                      $('#menu1 li').click(function () {   
                                          window.location =   $(this).find('a').attr('href');
                                          }).mouseover(function (){
                                                       $(this).find('a')
                                                       .animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
                                                       .animate( { backgroundColor: colorOver }, { queue:false, duration:200 });
                                                       }).mouseout(function () {
                                                                   $(this).find('a')
                                                                   .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
                                                                   .animate( { backgroundColor: colorOut }, { queue:false, duration:200 });

                                                                   }); 




    $('#sidebar1').mousemove(function(e) {
                                              var s_top = parseInt($('#sidebar1').offset().top);       
                                              var s_bottom = parseInt($('#sidebar1').height() + s_top);
                                              var mheight = parseInt($('#menu1 li').height() * $('#menu1 li').length);
                                              $('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
                                              $('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2));
                                              var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
                                              $('#menu1').animate({top: top_value}, { queue:false, duration:500});
                                              });







                      $(".text").hide();

                      $("#menu1 a.one").click(function () {
                                             $(".text").hide();
                                             $("#textOne").fadeIn();
                                             return false;
                                             });

                      $("#menu1 a.two").click(function () {
                                             $(".text").hide();
                                             $("#textTwo").fadeIn();
                                             return false;
                                             });

                      $("#menu1 a.three").click(function () {
                                               $(".text").hide();
                                               $("#textThree").fadeIn();
                                               return false;
                                               });
                      $("#menu2 a.four").click(function () {
                                               $(".text").hide();
                                               $("#textFour").fadeIn();
                                                            return false;
                                                            });

                        $("#menu2 a.five").click(function () {
                                                            $(".text").hide();
                                                            $("#textFive").fadeIn();
                                                            return false;
                                                            });

                        $("#menu2 a.six").click(function () {
                                                              $(".text").hide();
                                                              $("#textSix").fadeIn();
                                                              return false;
                                                              });



                      });

    </script>

 </body>
 </html>

Upvotes: 0

Views: 165

Answers (1)

Jonathan R&#246;mer
Jonathan R&#246;mer

Reputation: 628

You use #menu twice an id should be unique or give it an class menu. And then you can load the images with $(this).parent for example.

Upvotes: 1

Related Questions