Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.09.2015, 09:05
Аспирант
Отправить личное сообщение для puzjob Посмотреть профиль Найти все сообщения от puzjob
 
Регистрация: 10.09.2015
Сообщений: 44

Господа, прошу помощи!!!
Уважаемые посетители, помогите решить проблему:
имеется код:
<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, но таких блоков будет много и не хотелось бы раздувать код сайта.

В общем как доработать скрипт чтобы можно было разместить много подобных блоков с одним классом?
Ответить с цитированием
  #2 (permalink)  
Старый 10.09.2015, 10:27
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 10.09.2015, 10:47
Аспирант
Отправить личное сообщение для puzjob Посмотреть профиль Найти все сообщения от puzjob
 
Регистрация: 10.09.2015
Сообщений: 44

Уважаемые посетители, помогите решить проблему:
имеется код:
<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, но таких блоков будет много и не хотелось бы раздувать код сайта.

В общем как доработать скрипт чтобы можно было разместить много подобных блоков с одним классом?
Ответить с цитированием
  #4 (permalink)  
Старый 10.09.2015, 12:19
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

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
     });
  });

});
Ответить с цитированием
  #5 (permalink)  
Старый 10.09.2015, 14:12
Аспирант
Отправить личное сообщение для puzjob Посмотреть профиль Найти все сообщения от puzjob
 
Регистрация: 10.09.2015
Сообщений: 44

спасибо большое!
Вот только я абсолютно не разбираюсь в javascript !(( не могли бы вы подсказать (хотя бы примерно, а дальше попробую сам разобраться)
Ответить с цитированием
  #6 (permalink)  
Старый 10.09.2015, 14:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

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>
Ответить с цитированием
  #7 (permalink)  
Старый 10.09.2015, 15:37
Аспирант
Отправить личное сообщение для puzjob Посмотреть профиль Найти все сообщения от puzjob
 
Регистрация: 10.09.2015
Сообщений: 44

Огромное спасибо!!!!!!!!!! Вы мне очень помогли!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
прошу помощи с autocomplete uj query ramko AJAX и COMET 2 27.09.2013 20:35
Прошу помощи xavi AJAX и COMET 8 28.01.2013 10:36
Прошу помощи скриптеров или кого либо кто поможет :) f00rZik Общие вопросы Javascript 13 05.01.2012 03:42
Добрый вечер. Прошу небольшой помощи. dolgtm Учебные материалы 7 24.08.2011 00:31
Не корректно работает скрипт в IE, прошу помощи rafka1 Internet Explorer 0 15.05.2011 14:59