私の問題の解決策を見つけるために Google を検索しましたが、見つかりませんでした。http://www.mislebanon2010.com/urbana/index.phpのデモ
スクローラーは機能しますが、次のサムネイルに移動するにはオレンジ色の境界線が必要で、対応するメインの写真を現在のサムネイルに従って変更する必要があります
コード ：
<script type="text/javascript">
$(document).ready(function () {
//jCarousel Plugin
$('#carousel').jcarousel({
vertical: true,
scroll: 1,
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
//Combine jCarousel with Image Display
$('#slideshow-carousel li a').hover(
function () {
if (!$(this).has('span').length) {
$('#slideshow-carousel li a img').stop(true, true).css({'border': '2px #ccc solid'});
$(this).stop(true, true).children('img').css({'border':'2px orange solid'});
}
},
function () {
$('#slideshow-carousel li a img').stop(true, true).css({'border': '2px #ccc solid'});
$('#slideshow-carousel li a').each(function () {
if ($(this).has('span').length) $(this).children('img').css({'border':'2px orange solid'});
});
}
).click(function () {
$('span.arrow').remove();
$('#frtitle').html($(this).find("img").attr('title'));
$('#desc').html($(this).find("img").attr('alt'));
$(this).append('<span class="arrow"></span>');
$('#slideshow-main li').removeClass('active');
$('#slideshow-main li.' + $(this).attr('rel')).addClass('active');
return false;
});
});
function mycarousel_initCallback(carousel) {
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
}
</script>
写真、親指、および対応する大きな写真を自動的に変更するには、このコードを変更する必要があります。
編集:
完全な HTML コード:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Urbana Acceuil</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/skin.css" />
<script type="text/javascript">
$(document).ready(function () {
//jCarousel Plugin
$('#carousel').jcarousel({
vertical: true,
scroll: 1,
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
//Combine jCarousel with Image Display
$('#slideshow-carousel li a').hover(
function () {
if (!$(this).has('span').length) {
$('#slideshow-carousel li a img').stop(true, true).css({'border': '2px #ccc solid'});
$(this).stop(true, true).children('img').css({'border':'2px orange solid'});
}
},
function () {
$('#slideshow-carousel li a img').stop(true, true).css({'border': '2px #ccc solid'});
$('#slideshow-carousel li a').each(function () {
if ($(this).has('span').length) $(this).children('img').css({'border':'2px orange solid'});
});
}
).click(function () {
$('span.arrow').remove();
$('#frtitle').html($(this).find("img").attr('title'));
$('#desc').html($(this).find("img").attr('alt'));
$(this).append('<span class="arrow"></span>');
$('#slideshow-main li').removeClass('active');
$('#slideshow-main li.' + $(this).attr('rel')).addClass('active');
return false;
});
});
function mycarousel_initCallback(carousel) {
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
}
</script>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana;
font-size: 11px;
color: #EFF1F5;
}
body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/rightlightgrey.jpg);
}
.leftgrey {
color: #8E98A8
}
.styleleftbarorange {
color: #C85E08;
font-size: 14px;
}
.arroworange {font-size: 24px}
.style5 {
font-size: 24px;
color: #C85E08;
font-weight: bold;
}
.facebook {
color: #CFD4DD;
text-decoration: none;
}
.menu {
font-size: 12px;
text-decoration: none;
color: #EFF1F5;
}
.style9 {color: #FF0000}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.menu11 {
font-size: 11px;
text-decoration: none;
color: #EFF1F5;
}
/* Slide Show */
img {
border:0;
}
#slideshow-main {
width:950px;
top:0px;
padding:0px;
height: 511px;
}
#slideshow-main ul {
margin:0;
padding:0;
width:952px;
}
#slideshow-main li {
width:952px;
height:511px;
display:none;
position:relative;
}
#slideshow-main li.active {
display:block !important;
}
#slideshow-main li span.opacity {
position:absolute;
bottom:28px;
left:5px;
display:block;
width:944px;
height:60px;
background:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index:500;
}
#slideshow-main li span.content {
position:absolute;
bottom:26px;
left:-4px;
display:block;
width:100%;
height:60px;
z-index:1000;
}
#slideshow-main li span.content h1 {
font-size:14px;
margin:5px 0;
padding:0 10px;;
color:#42e2e8;
}
#slideshow-main li span.content p {
font-size:11px;
margin:5px 0;
padding:0 10px;;
color:#42e2e8;
}
#slideshow-carousel {
float:left;
width:86px;
position:relative;
overflow:hidden;
}
#slideshow-carousel ul {
margin:0;
padding:0;
list-style:none;
}
#slideshow-carousel li {
background:#fff;
height:70px;
position:relative;
width: 89px;
}
#slideshow-carousel li img {
margin-bottom:2px;
}
#slideshow-carousel li a img {border:2px #ccc solid;}
#slideshow-carousel li a {
display:block;
width:86px;
height:69px;
}
#slideshow-carousel .active {
filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
}
#slideshow-carousel .faded {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#thumbs-carousel {
overflow:hidden;
position:relative;
height:464px;
padding-left:1px;
list-style:none;
}
-->
</style>
<script type="text/javascript">
/*<![CDATA[*/
function Scroll(id,ud,spd){
var obj=document.getElementById(id);
clearTimeout(obj.to);
if (ud){
obj.scrollTop=obj.scrollTop+ud;
obj.to=setTimeout(function(){ Scroll(id,ud,spd); },spd||10)
}
}
/*]]>*/
</script>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" background="images/topgrey.jpg"></td>
<td align="center" valign="bottom" background="images/topgrey.jpg"><table width="1250" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="25" /></td>
<td><img src="images/spacer.gif" alt="a" width="160" height="1" /></td>
<td></td>
<td></td>
<td><img src="images/spacer.gif" alt="a" width="60" height="1" /></td>
<td></td>
<td></td>
<td></td>
<td><img src="images/spacer.gif" alt="a" width="94" height="1" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="a" width="185" height="1" /></td>
<td>suivez-nous sur <a href="http://www.facebook.com/urbanacanada" class="facebook">facebook</a></td>
<td><img src="images/spacer.gif" alt="a" width="4" height="1" /></td>
<td><span class="facebook"><a href="http://www.facebook.com/urbanacanada" target="_blank"><img src="images/facebook.png" alt="fb" width="20" height="19" border="0" /></a></span></td>
<td><span class="facebook"> / </span><a href="https://twitter.com/#!/urbana" class="facebook">twitter</a> </td>
<td><img src="images/spacer.gif" alt="a" width="4" height="1" /></td>
<td><span class="facebook"><a href="https://twitter.com/#!/urbana" target="_blank"><img src="images/twitter.png" alt="tw" width="19" height="19" border="0" /></a></span></td>
<td><img src="images/spacer.gif" alt="a" width="44" height="1" /></td>
<td><a href="liste.html" class="menu11">liste de souhaits</a></td>
<td><img src="images/spacer.gif" alt="a" width="6" height="1" /></td>
<td><img src="images/souhaiticon.png" alt="a" width="17" height="19" /></td>
<td><img src="images/spacer.gif" alt="a" width="309" height="1" /></td>
<td><a href="english/index.html" class="menu11">english</a> / <strong>français</strong></td>
<td><img src="images/spacer.gif" alt="a" width="60" height="1" /></td>
<td><img src="images/soundon.png" alt="a" width="15" height="19" /></td>
<td><img src="images/spacer.gif" alt="a" width="124" height="1" /></td>
</tr>
<tr>
<td colspan="16"><img src="images/spacer.gif" alt="a" width="1" height="7" /></td>
</tr>
</table></td>
<td align="center" background="images/topgrey.jpg"></td>
</tr>
<tr>
<td align="center" valign="top" background="images/rightlightgrey.jpg"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td width="1250" valign="top"><table width="1250" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
<tr>
<td rowspan="2" valign="top" background="images/rightlightgrey.jpg"><table width="174" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="160" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="26" /></td>
<td align="right" class="styleleftbarorange"><table width="138" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" class="styleleftbarorange">Modèle <strong><span id="frtitle">Astor</span></strong></td>
<td align="right"><span class="style5"><</span></td>
</tr>
</table></td>
<td></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="60" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="166" height="1" /></td>
<td></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="86" /></td>
<td align="right"><span class="leftgrey" id="desc">Importé d'Espagne,<br />
ce modèle vous est<br />
offert en plusieurs couleurs,<br />
plusieurs tissus et<br />
plusieurs dimensions.</span></td>
<td></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="a" width="4" height="126" /></td>
<td align="center"></td>
<td><img src="images/spacer.gif" alt="a" width="4" height="126" /></td>
</tr>
</table></td>
<td rowspan="2">
<div id="slideshow-main">
<ul>
<li class="p1 active">
<a href="#">
<img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/image-G3ZI4ECXLHZSGWA.jpg" width="952" height="511" alt=""/></a>
</li> <li class="p2">
<a href="#">
<img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/image-SJCX0K9DMLR0OLJ.jpg" width="952" height="511" alt=""/></a>
</li> <li class="p3">
<a href="#">
<img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/image-76YRTEM4KJLL0D2.jpg" width="952" height="511" alt=""/></a>
</li> <li class="p4">
<a href="#">
<img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/image-LR3OS96YMVGPN0D.jpg" width="952" height="511" alt=""/></a>
</li> <li class="p5">
<a href="#">
<img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/image-AN8AHB2KOG0YHMZ.jpg" width="952" height="511" alt=""/></a>
</li> <li class="p6">
<a href="#">
<img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/image-COVLIU0U7P06WND.jpg" width="952" height="511" alt=""/></a>
</li> </ul></div>
</td>
<td><table width="123" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="86" border="0" cellspacing="0" cellpadding="0">
<!--<tr>
<td><a href="#" onmousedown="Scroll('thumbs-carousel',-1);" onmouseup="Scroll('thumbs-carousel');" onmouseout="Scroll('thumbs-carousel');" ><img src="images/toparrow.jpg" alt="a" width="86" height="62" /></a></td>
</tr>-->
<!--Load Here-->
<tr>
<td>
<div id="slideshow-carousel">
<div id="thumbs-carousel">
<ul id="carousel" class="jcarousel jcarousel-skin-tango">
<li><a href="#" rel="p1"><img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/thumbs/image-G3ZI4ECXLHZSGWA.jpg" alt="Le Test" width="80" height="65" title="Canapé" id="thumb" /></a></li>
<li><a href="#" rel="p2"><img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/thumbs/image-SJCX0K9DMLR0OLJ.jpg" alt="test" width="80" height="65" title="canapes" id="thumb" /></a></li>
<li><a href="#" rel="p3"><img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/thumbs/image-76YRTEM4KJLL0D2.jpg" alt="Importé d'Espagne,
ce modèle vous est
offert en plusieurs couleurs,
plusieurs tissus et
plusieurs dimensions" width="80" height="65" title="Danzka" id="thumb" /></a></li>
<li><a href="#" rel="p4"><img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/thumbs/image-LR3OS96YMVGPN0D.jpg" alt="Alfredo Testing" width="80" height="65" title="Alfredo" id="thumb" /></a></li>
<li><a href="#" rel="p5"><img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/thumbs/image-AN8AHB2KOG0YHMZ.jpg" alt="Raviolla Modele" width="80" height="65" title="Raviolla" id="thumb" /></a></li>
<li><a href="#" rel="p6"><img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/thumbs/image-COVLIU0U7P06WND.jpg" alt="" width="80" height="65" title="Munich" id="thumb" /></a></li> </ul>
</div>
</div>
<!-- End Here -->
</td>
</tr>
<!-- <tr>
<td><a href="#" onmousedown="Scroll('thumbs-carousel',1);" onmouseup="Scroll('thumbs-carousel');" onmouseout="Scroll('thumbs-carousel');"><img src="images/bottomarrow.jpg" alt="a" width="86" height="61" /></a></td>
</tr>-->
</table></td>
<td><img src="images/spacer.gif" alt="a" width="38" height="1" /></td>
</tr>
</table></td>
</tr>
<tr>
<td background="images/bottomgreyright.jpg"><img src="images/spacer.gif" width="1" height="43" /></td>
</tr>
</table></td>
<td align="center" valign="top" background="images/mix.jpg"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table> </td>
</tr>
<tr>
<td align="center" valign="top"></td>
<td align="center" valign="top"><table width="1250" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td background="images/rightlightgrey.jpg"><img src="images/spacer.gif" width="174" height="1" /></td>
<td background="images/bottomgrey.jpg"><img src="images/spacer.gif" alt="" width="952" height="1" /></td>
<td background="images/bottomgrey.jpg"><img src="images/spacer.gif" alt="" width="124" height="1" /></td>
</tr>
<tr>
<td align="center" background="images/rightlightgrey.jpg"><table width="174" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="110" /></td>
<td align="center"><a href="index.html"><img src="images/logo1.jpg" alt="logo urbana" width="124" height="99" border="0" /></a></td>
<td><img src="images/spacer.gif" alt="a" width="1" height="110" /></td>
</tr>
</table></td>
<td background="images/bottomgrey.jpg"><table width="952" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="7" /></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="20" /></td>
</tr>
<tr>
<td align="right"><img src="images/spacer.gif" alt="a" width="1" height="5" /></td>
</tr>
<tr>
<td align="right"><table width="550" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="index.html" class="menu">acceuil</a></td>
<td align="center"></td>
<td align="center"><span class="menu">/</span></td>
<td align="center"></td>
<td align="center"><a href="produits.php?catid=1" class="menu">produits</a></td>
<td align="center"></td>
<td align="center"><span class="menu">/</span></td>
<td align="center"></td>
<td align="center"><a href="promo.html" class="menu">promo</a></td>
<td align="center"></td>
<td align="center"><span class="menu">/</span></td>
<td align="center"></td>
<td align="center"><a href="companie.html" class="menu">companie</a></td>
<td align="center"></td>
<td align="center"><span class="menu">/</span></td>
<td align="center"></td>
<td align="center"><a href="contacts.html" class="menu">contacts</a></td>
<td></td>
</tr>
<tr>
<td colspan="18"><img src="images/spacer.gif" alt="a" width="1" height="5" /></td>
</tr>
<tr>
<td align="center"><img src="images/line.png" alt="a" width="44" height="3" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="5" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="54" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="5" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="45" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="5" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="58" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="5" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="54" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="80" height="1" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right"><img src="images/spacer.gif" alt="a" width="1" height="20" /></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><table width="952" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif" alt="a" width="26" height="1" /></td>
<td><img src="images/spacer.gif" alt="a" width="284" height="1" /></td>
<td><img src="images/spacer.gif" alt="a" width="310" height="1" /></td>
<td><img src="images/spacer.gif" alt="a" width="190" height="1" /></td>
<td><img src="images/spacer.gif" alt="a" width="72" height="1" /></td>
<td><img src="images/spacer.gif" alt="a" width="70" height="1" /></td>
</tr>
<tr>
<td></td>
<td>© urbana mobilier inc 2012. tous droits réservés</td>
<td></td>
<td><a href="contacts.html" class="menu11">inscrivez-vous à notre newsletter</a></td>
<td></td>
<td><a href="plan.html" class="menu11">plan du site</a></td>
</tr>
</table></td>
</tr>
</table></td>
<td background="images/bottomgrey.jpg"></td>
</tr>
</table></td>
<td align="center" valign="top" background="images/bottomgrey.jpg"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>