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

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

Меня интересует вопрос, как реализовать несколько блоков со сменой изображения? Например, какой вид будет иметь функция при следующей структуре страницы:
Код:
<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,431
У нас с: 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,431
У нас с: 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,431
У нас с: 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,431
У нас с: 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,431
У нас с: 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 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru