0
salut suis la conception d'une navigation verticale sur la page d'accueil. Le premier menu vertical est une liste de links.each quand le clic devrait charger l'ensemble des vignettes verticalement parallèlement au mainmenu list.mon émettez la charge de jscript tous les deux la vignette au chargement de la page. il devrait seulement les premières vignettes de menu. et quand le deuxième menu est cliqué il devrait charger seulement le deuxième ensemble de vignette.comment charger les miniatures dans jquery
<!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>
J'ai changé le code pour obtenir une navigation verticale avec trois colonne. Première colonne pour le menu deuxième pour le sous-menu et la troisième zone d'affichage. Quelqu'un peut m'aider avec la partie jscript. comment changer pour le faire fonctionner pour plusieurs menus. Actuellement seulement menu1 charge les thumnails dans le sous-menu aera.any expert jquery ?? –