Господа, прошу помощи!!!
Уважаемые посетители, помогите решить проблему:
имеется код: <div id="gallery"> <table id="table" border="0"> <tr><td valign="top"> <img src="./img/catalog/host/1/1.jpg" alt="" id="main-img1" /> </td> <td align="center" valign="top"> <ul> <li><img src="./img/catalog/host/1/thumb/1.jpg" alt="" width="100" /></li> <li><img src="./img/catalog/host/1/thumb/2.jpg" alt="" width="100" /></li> <li><img src="./img/catalog/host/1/thumb/3.jpg" alt="" width="100" /></li> </ul> </td> </tr> </table> </div> и скрипт для него: <script type="text/JavaScript"> // prepare the form when the DOM is ready $(document).ready(function() { $("#gallery li img").hover(function(){ $('#main-img2').attr('src',$(this).attr('src').replace('thu mb/', '')); }); var imgSwap = []; $("#gallery li img").each(function(){ imgUrl = this.src.replace('thumb/', ''); imgSwap.push(imgUrl); }); $(imgSwap).preload(); }); $.fn.preload = function() { this.each(function(){ $('<img/>')[0].src = this; }); } </script> Проблема в следующем: Что бы разместить 2 блока с меняющимися картинками необходимо id заменить class, но в таком случае последняя замененная картинка с class="main-img2" появляется во втором блоке. Как сделать 2 таких блока рядом и чтобы они зависили друг от друга? Можно конечно для каждого из блоков присвоить свой id, но таких блоков будет много и не хотелось бы раздувать код сайта. В общем как доработать скрипт чтобы можно было разместить много подобных блоков с одним классом? |
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Уважаемые посетители, помогите решить проблему:
имеется код: <div id="gallery"> <table id="table" border="0"> <tr><td valign="top"> <img src="./img/catalog/host/1/1.jpg" alt="" id="main-img1" /> </td> <td align="center" valign="top"> <ul> <li><img src="./img/catalog/host/1/thumb/1.jpg" alt="" width="100" /></li> <li><img src="./img/catalog/host/1/thumb/2.jpg" alt="" width="100" /></li> <li><img src="./img/catalog/host/1/thumb/3.jpg" alt="" width="100" /></li> </ul> </td> </tr> </table> </div> и скрипт для него:
// prepare the form when the DOM is ready
$(document).ready(function() {
$("#gallery li img").hover(function(){
$('#main-img2').attr('src',$(this).attr('src').replace('thu mb/', ''));
});
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
Проблема в следующем: Что бы разместить 2 блока с меняющимися картинками необходимо id заменить class, но в таком случае последняя замененная картинка с class="main-img2" появляется во втором блоке. Как сделать 2 таких блока рядом и чтобы они НЕ зависели друг от друга? Можно конечно для каждого из блоков присвоить свой id, но таких блоков будет много и не хотелось бы раздувать код сайта. В общем как доработать скрипт чтобы можно было разместить много подобных блоков с одним классом? |
puzjob,
Вам надо оазместить все зависимые блоки в 1 элементе и тогда не будет проблем. То есть: <div class='block'> <div class='to-hover'>...</div> <div class='to-do'>...</div> </div> Тогда:
$(function () {
$('.block').each(function () {
var block = $(this);
block.find('.to-heover').hover(function () {
block.find('.to-do')... //do some
});
});
});
|
спасибо большое!
Вот только я абсолютно не разбираюсь в javascript !(( не могли бы вы подсказать (хотя бы примерно, а дальше попробую сам разобраться) |
puzjob, class="gallery" class="main-img1"
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main-img1{
width: 100px;
height: auto;
}
li{
float: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.fn.preload = function() {
this.each(function() {
$("<img/>")[0].src = this
})
};
$(".gallery").each(function(c, a) {
$("li img", a).hover(function() {
$(".main-img1", a).attr("src", $(this).attr("src").replace("thu mb/", ""))
});
var b = [];
$("li img", a).each(function() {
imgUrl = this.src.replace("thumb/", "");
b.push(imgUrl)
});
$(b).preload()
})
});
</script>
</head>
<body>
<div class="gallery">
<table id="table" border="0">
<tr><td valign="top">
<img src="./img/catalog/host/1/1.jpg" alt="" class="main-img1" />
</td>
<td align="center" valign="top">
<ul>
<li><img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="" width="100" /></li>
<li><img src="http://javascript.ru/forum/images/smilies/cray.gif" alt="" width="100" /></li>
<li><img src="http://javascript.ru/forum/images/smilies/write.gif" alt="" width="100" /></li>
</ul>
</td>
</tr>
</table>
</div>
<div class="gallery">
<table id="table" border="0">
<tr><td valign="top">
<img src="./img/catalog/host/1/1.jpg" alt="" class="main-img1" />
</td>
<td align="center" valign="top">
<ul>
<li><img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="" width="100" /></li>
<li><img src="http://javascript.ru/forum/images/smilies/cray.gif" alt="" width="100" /></li>
<li><img src="http://javascript.ru/forum/images/smilies/write.gif" alt="" width="100" /></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
|
Огромное спасибо!!!!!!!!!! Вы мне очень помогли!!!
|
| Часовой пояс GMT +3, время: 11:27. |