Создать ответ 
Помощь со скриптом "Смена изображения при клике по ссылке"
Автор Сообщение
Tema_Perets Не на форуме
Рядовой
*

Сообщений: 1
У нас с: Aug 2014
Сообщение: #1
Помощь со скриптом "Смена изображения при клике по ссылке"
Статья расположена по ссылке http://usefulscript.ru/change_img_link.php

Меня интересует вопрос, как реализовать несколько блоков со сменой изображения? Например, какой вид будет иметь функция при следующей структуре страницы:
Код:
<img src="image/v1.jpg" name="example_img1"></br>
  <a href="javascript:l_image ('image/v1.jpg')"><img src="image/v1.jpg"></a>
  <a href="javascript:l_image ('image/v2.jpg')"><img  src="image/v2.jpeg"></a>
  <a href="javascript:l_image ('image/v3.jpg')"><img  src="image/v3.jpg"></a>

<img src="image/p1.jpg" name="example_img2"></br>
  <a href="javascript:l_image ('image/р1.jpg')"><img src="image/р1.jpg"></a>
  <a href="javascript:l_image ('image/р2.jpg')"><img src="image/р2.jpeg"></a>
  <a href="javascript:l_image ('image/р3.jpg')"><img src="image/р3.jpg"></a>
08.08.2014 13:56:37
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #2
RE: Помощь со скриптом "Смена изображения при клике по ссылке"
Конечно, наверное, не лучшее решение, но работает:

Код:
<script type="text/javascript">
function l_image (b,a) {
    b.src=a;
}
</script>


<img src="image/v1.jpg" name="example_img1"></br>
   <a href="javascript:l_image (document.example_img1,'image/v1.jpg')"><img src="image/v1.jpg"></a>
   <a href="javascript:l_image (document.example_img1,'image/v2.jpg')"><img src="image/v2.jpeg"></a>
   <a href="javascript:l_image (document.example_img1,'image/v3.jpg')"><img src="image/v3.jpg"></a>
  
<img src="image/p1.jpg" name="example_img2"></br>
   <a href="javascript:l_image (document.example_img2,'image/р1.jpg')"><img src="image/р1.jpg"></a>
   <a href="javascript:l_image (document.example_img2,'image/р2.jpg')"><img src="image/р2.jpeg"></a>
   <a href="javascript:l_image (document.example_img2,'image/р3.jpg')"><img src="image/р3.jpg"></a>

А еще лучше, переходите на работу с jQuery.
08.08.2014 20:55:20
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #3
RE: Помощь со скриптом "Смена изображения при клике по ссылке"
В продолжение темы еще один код:

Код:
<script type="text/javascript">
    function l_image (b,a) { document.getElementById(b).src='image/'+a; }
</script>

<img src="image/img_1.png" id="layer_1"></br>
<img src="image/img_2.png" id="layer_2"></br>

Слой 1: <a href="javascript:l_image('layer_1','img_1.png')">red</a>,
<a href="javascript:l_image('layer_1','img_2.png')">green</a>,
<a href="javascript:l_image('layer_1','img_3.png')">blue</a>.

</br>
Слой 2: <a href="javascript:l_image('layer_2','img_2.png')">magenta</a>,
<a href="javascript:l_image('layer_2','img_3.png')">yellow</a>,
<a href="javascript:l_image('layer_2','img_4.png')">black</a>.
28.09.2015 17:20:17
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #4
RE: Помощь со скриптом "Смена изображения при клике по ссылке"
Если необходимо наложить полупрозрачные изображения друг на друга, то тогда используйте такой код:

Код:
<script type="text/javascript">
    function l_image (b,a) { document.getElementById(b).src='image/'+a; }
</script>

<style>
    .layer {position:relative; height:150px;}
    .layer img{position:absolute; top:0; left:0; border:0; margin:0; padding:0}
</style>

<div class="layer">
    <img src="image/img_1.png" id="layer_1">
    <img src="image/img_2.png" id="layer_2">
</div>

Слой 1:
<a href="javascript:l_image('layer_1','img_1.png')">red</a>,
<a href="javascript:l_image('layer_1','img_2.png')">green</a>,
<a href="javascript:l_image('layer_1','img_3.png')">blue</a>.

</br>
Слой 2:
<a href="javascript:l_image('layer_2','img_2.png')">magenta</a>,
<a href="javascript:l_image('layer_2','img_3.png')">yellow</a>,
<a href="javascript:l_image('layer_2','img_4.png')">black</a>.

Где height:150px; - максимальная высота накладываемых изображений.
29.09.2015 17:01:09
Найти все сообщения Цитировать это сообщение
MeRKoN Не на форуме
Рядовой
*

Сообщений: 3
У нас с: Sep 2015
Сообщение: #5
RE: Помощь со скриптом "Смена изображения при клике по ссылке"
А возможно ли добавить в этот код пару функций, такие как открытие изображения в lightbox и плавное изменение изображений?
30.09.2015 10:16:57
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #6
RE: Помощь со скриптом "Смена изображения при клике по ссылке"
Плавную смену в принципе возможно добавить, а вот с Lightbox труднее, т.к. он предназначен для показа одного изображения, а не нескольких слоями.
30.09.2015 11:06:29
Найти все сообщения Цитировать это сообщение
MeRKoN Не на форуме
Рядовой
*

Сообщений: 3
У нас с: Sep 2015
Сообщение: #7
RE: Помощь со скриптом "Смена изображения при клике по ссылке"
(30.09.2015 11:06:29)Admin писал(а):  Плавную смену в принципе возможно добавить, а вот с Lightbox труднее, т.к. он предназначен для показа одного изображения, а не нескольких слоями.

Могли бы помочь хотя бы с плавной заменой изображений?
30.09.2015 13:30:45
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #8
RE: Помощь со скриптом "Смена изображения при клике по ссылке"
Если у Вас на сайте не подключена библиотека jQuery, то добавьте ее в шапку сайта:
Код:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

И замените JS код на такой:
Код:
<script type="text/javascript">
function l_image (b,a) {
    $("#"+b).fadeOut(500,function(){$("#"+b).attr("src",'image/'+a);}).fadeIn(500);
}
</script>
30.09.2015 13:55:23
Найти все сообщения Цитировать это сообщение
MeRKoN Не на форуме
Рядовой
*

Сообщений: 3
У нас с: Sep 2015
Сообщение: #9
RE: Помощь со скриптом "Смена изображения при клике по ссылке"
(30.09.2015 13:55:23)Admin писал(а):  Если у Вас на сайте не подключена библиотека jQuery, то добавьте ее в шапку сайта:
Код:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

И замените JS код на такой:
Код:
<script type="text/javascript">
function l_image (b,a) {
    $("#"+b).fadeOut(500,function(){$("#"+b).attr("src",'image/'+a);}).fadeIn(500);
}
</script>

Огромное спасибо, работает идеально) хотелось бы еще и Lightbox, но это уже по желанию)
30.09.2015 14:42:51
Найти все сообщения Цитировать это сообщение
narvel Не на форуме
Рядовой
*

Сообщений: 2
У нас с: Apr 2016
Сообщение: #10
RE: Помощь со скриптом "Смена изображения при клике по ссылке"
Здравствуйте, уважаемый админ. Возможно ли к скрипту "Смена изображения при клике по ссылке" добавит еще 2 кнопки для листания картинок?

Очень нужен такой скрипт или подобный ему. Готов заплатить за работу.

По сути нужно так, как сделано на сайте igdz.ru/4-klass/okruzhayuschij-mir/vahrushev-1/ (не реклама)
09.04.2016 22:23:23
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)



Mail.ru LiveInternet

© Copyright 2011-2016 by UsefulScript.ru