Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Господа, помогите пожалуйста!!! / 7 сообщений из 7, страница 1 из 1
10.09.2015, 09:20
    #39047661
puzjob
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Господа, помогите пожалуйста!!!
Уважаемые посетители, помогите решить проблему:
имеется код:
<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 таких блока рядом и чтобы они yt зависели друг от друга? Можно конечно для каждого из блоков присвоить свой id, но таких блоков будет много и не хотелось бы раздувать код сайта.

В общем как доработать скрипт чтобы можно было разместить много подобных блоков с одним классом?
...
Рейтинг: 0 / 0
10.09.2015, 09:43
    #39047693
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Господа, помогите пожалуйста!!!
puzjob,
ну классов у вас скажем честно нет.
Да и не понятно, что вам надо сделать-то.
(Правильно заданный вопрос-половина правильного ответа)
...
Рейтинг: 0 / 0
10.09.2015, 10:08
    #39047722
puzjob
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Господа, помогите пожалуйста!!!
все верно, сейчас все через id ! проблема в следующем: как разместить 2 блока

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

рядом ?
Что бы скрипт работал и не надо было для каждого блока прописывать совой id
...
Рейтинг: 0 / 0
10.09.2015, 10:19
    #39047739
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Господа, помогите пожалуйста!!!
puzjob,
при одинаковой структуре можно использовать перемещение по дереву:
http://jquery.page2page.ru/index.php5/Работа_с_набором_элементов
...
Рейтинг: 0 / 0
10.09.2015, 10:41
    #39047771
puzjob
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Господа, помогите пожалуйста!!!
kunaksergey, спасибо большое!
Вот только я абсолютно не разбираюсь в javascript !(( не могли бы вы подсказать (хотя бы примерно, а дальше попробую сам разобраться)
...
Рейтинг: 0 / 0
10.09.2015, 12:26
    #39047898
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Господа, помогите пожалуйста!!!
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
<html>
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/JavaScript">
// prepare the form when the DOM is ready 
$(document).ready(function() {

$("#gallery li img").hover(function(){

$(this).closest('td').prev().children('img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
});

</script>
</head> 
<body>
<div id="gallery">
<table id="table" border="0">
<tr><td valign="top">
<img src="./img/catalog/host/1/1.jpg" alt="" />
</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>
<tr><td valign="top">
<img src="./img/catalog/host/1/1.jpg" alt="" />
</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>
</body>
</html>
...
Рейтинг: 0 / 0
10.09.2015, 14:10
    #39048053
puzjob
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Господа, помогите пожалуйста!!!
Спасибо, буду разбираться!)
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Господа, помогите пожалуйста!!! / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]