Фильтр по:
  

Смена большой картинки при клике на превью. Как?

Как сделать...

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Смена большой картинки при клике на превью. Как? (Что бы при клике на маленькие фото, они занимали место больш)
Смена большой картинки при клике на превью. Как?
Дата: Пятница, 13.05.2011, 20:00 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown
Quote (Vlad6250)
День добрый. У меня на странице материала размещено 5 фото, одно центральное большое, остальные маленькие. Как сделать так, что бы при клике на маленькие фото, они занимали место большого фото?
Если у вас есть решение, подскажите пожалуйста! cry
Спасибо.


 
Дата: Пятница, 13.05.2011, 20:17 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown
Quote (Vlad6250)
Если у вас есть решение, подскажите пожалуйста! cry

Только скриптом. Более ни как.
Центральное изображение фиксированных размеров, при клике на маленьком, ссылки на картинки меняются местами ...
Или просто меняется ссылка большого изображения, на ссылку к картинке того изображения по которому кликнули ... Или берётся из массива, если есть ...
...
Организуется примерно так:
Большой картинке устанавливается атрибут ID - «bigImg» и фиксированные размеры (по одной из сторон):
Code
<img id="bigImg" src="http://auto51.ucoz.ru/_bd/0/98872799.jpg" border="1" width="550" alt="Corolla - Toyota">

Где:
id="bigImg" - Атрибут ID к которому будем привязывать скрипт.

Картинки - превью запаковываем в блок с определённым классом - «thumbs» - класс привязан к скрипту.
Code
<p class="thumbs" align="center">
<a href="http://auto51.ucoz.ru/_bd/0/98872799.jpg"><img src="http://auto51.ucoz.ru/_bd/0/s98872799.jpg" border="1" height="120" width="160"></a>     
<a href="http://auto51.ucoz.ru/_bd/0/02527685.jpg"><img src="http://auto51.ucoz.ru/_bd/0/s02527685.jpg" border="1" height="120" width="160"></a>     
<a href="http://auto51.ucoz.ru/_bd/0/01728600.jpg"><img src="http://auto51.ucoz.ru/_bd/0/s01728600.jpg" border="1" height="120" width="160"></a>     
<a href="http://auto51.ucoz.ru/_bd/0/43725996.jpg"><img src="http://auto51.ucoz.ru/_bd/0/s43725996.jpg" border="1" height="120" width="160"></a>     
<a href="http://auto51.ucoz.ru/_bd/0/61161379.jpg"><img src="http://auto51.ucoz.ru/_bd/0/s61161379.jpg" border="1" height="120" width="160"></a>
</p>

Где:
class="thumbs" - класс для блока с картинками-превью.
<a href="http://auto51.ucoz.ru/_bd/0/01728600.jpg"> - ссылка на полную картинку.
<img src="http://auto51.ucoz.ru/_bd/0/s02527685.jpg"> - маленькая картинка-превью.

Далее - самое простое ....
Скрипт:
Code
<script type="text/javascript">
$(function(){
$('.thumbs a').click(function(){
var bigPath=$(this).attr('href');
var bigAlt=$(this).attr('title');
$('#bigImg').attr({src:bigPath,alt:bigAlt});
return false;
});
});
</script>

Где:
$('.thumbs a').click(function() - вешаем событие «клик» а ссылки в блоке с классом «thumbs».
var bigPath=$(this).attr('href'); - заносим в переменную ссылку на большую картинку превью по которому кликнули.
var bigAlt=$(this).attr('title'); - заносим в переменную атрибут «alt» - если есть - можно опустить.
$('#bigImg').attr({src:bigPath,alt:bigAlt}); - устанавливаем большой картинке сохранённые данные - атрибут «src» и атрибут «alt».
return false; - возвращаем «false» - переопределяем системное событие при клике - переход по ссылке.
...

Сокращённый вариант скрипта:
Code
<script type="text/javascript">
$(function(){
$('.thumbs a').click(function(){
$("#bigImg").attr({src:$(this).attr('href')});
return false;
});
});
</script>

...

☑ Смена большой картинки при клике на превью (Change Thumbs v1) ...
...

Скрипт добавляется ... можно прямо в материал. В любое место как HTML.
Или как ссылки на внешний файл.
...

 
Дата: Пятница, 13.05.2011, 20:18 |
Группа: Гости





 Вы привели конкретное решение по конкретным фото, а надо в общем на все объявы.
Я прописывал картинки в шаблоне так:
Code
<A href="$ENTRY_URL$"><IMG border=1 src="$IMG_URL1$" width=550>

это большое фото
Code
<A href="$ENTRY_URL$"><IMG border=1 src="$IMG_SMALL_URL1$" width=160 height=120>
<A href="$ENTRY_URL$"><IMG border=1 src="$IMG_SMALL_URL2$" width=160 height=120>
<A href="$ENTRY_URL$"><IMG border=1 src="$IMG_SMALL_URL3$" width=160 height=120>
<A href="$ENTRY_URL$"><IMG border=1 src="$IMG_SMALL_URL4$" width=160 height=120>
<A href="$ENTRY_URL$"><IMG border=1 src="$IMG_SMALL_URL5$" width=160 height=120>

это маленькие

а дальше наверное нужен javascript...

Подскажите, может у меня ошибка и как написать скрипт

Спасибо.
Vlad6250

Добавлено (14.05.2011, 00:55)
---------------------------------------------

Code
<A href="$ENTRY_URL$"><IMG border=1 src="$IMG_URL1$" width=550>
<a href="$ENTRY_URL$"><img src="http://xxxx.xxx.xxx/xxx.jpg" width="100" border="1" alt="no photo" />

Извиняюсь выше я не полность код привёл...

Сообщение отредактировал likbezz - Суббота, 14.05.2011, 01:22
 
Дата: Суббота, 14.05.2011, 01:17 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Гость,
Quote (Гость)
Вы привели конкретное решение по конкретным фото, а надо в общем на все объявы.

Я привел как раз это.
Вы видимо не очень внимательно прочитали.

Quote (Гость)
Я прописывал картинки в шаблоне так:

А надо вот так:
Code
<a href="$ENTRY_URL$"><img id="bigImg" src="$IMG_URL1$" border="1" width="550" alt="$ENTRY_TITLE$"></a>

Quote (Гость)
это маленькие

А маленькие вот так:
Code
<div class="thumbs">
<a href="$IMG_URL1$"><img src="$IMG_SMALL_URL1$" border="1" height="120" width="160"></a>     
<a href="$IMG_URL2$"><img src="$IMG_SMALL_URL2$" border="1" height="120" width="160"></a>     
<a href="$IMG_URL3$"><img src="$IMG_SMALL_URL2$" border="1" height="120" width="160"></a>     
</div>

Естественно, проверив, условными операторами, есть ли картинка $IMG_URL3$ и далее ....

А сам скрипт - в шаблон «Материал и коментарии» - после всего контента, например перед закрывающем </body>

Code
<script type="text/javascript">
$(function(){
$('.thumbs a').click(function(){
$('#bigImg').attr({src:$(this).attr('href')});
return false;});
});
</script>

...

 
Дата: Суббота, 14.05.2011, 01:18 |
Группа: Гости





 УРА!!! ЗАРАБОТАЛО!!!
Большое спасибо за помощь!

 
Дата: Вторник, 14.02.2012, 19:26 |
kimi
Рядовой
Группа: Зарегистрированные
Сообщений: 9
Награды: 0
Репутация: 0
Статус: Offline


 Подскажите пожалуйста как добавить на картинку которую выбрали из нескольки ссылку на другую страницу.

 
Дата: Среда, 15.02.2012, 07:30 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 kimi,
Quote (kimi)
Подскажите пожалуйста как добавить на картинку которую выбрали из нескольки ссылку на другую страницу.

Что, простите?
Я вас что-то не очень понял.
...

 
Дата: Среда, 15.02.2012, 12:17 |
kimi
Рядовой
Группа: Зарегистрированные
Сообщений: 9
Награды: 0
Репутация: 0
Статус: Offline


 У нас есть 5 маленьких и 1 большая меняющаяся картинка как приведен пример выше. Мне нужно сделать так чтобы я выбрал картинку, и потом мог нажать на нее и перейти по ссылке на другую страницу.

Добавлено (15.02.2012, 12:17)
---------------------------------------------
У нас есть 5 маленьких и 1 большая меняющаяся картинка как приведен пример выше. Мне нужно сделать так чтобы я выбрал картинку, и потом мог нажать на нее и перейти по ссылке на другую страницу.

 
Дата: Среда, 15.02.2012, 13:31 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 kimi,
Quote (kimi)
У нас есть 5 маленьких и 1 большая меняющаяся картинка как приведен пример выше. Мне нужно сделать так чтобы я выбрал картинку, и потом мог нажать на нее и перейти по ссылке на другую страницу.

Так добавь ссылку к большому изображению, да и всё....
... Она, ссылка, присутствует, кстати:
Code
<a href="$ENTRY_URL$"><img id="bigImg" src="$IMG_URL1$" border="1" width="550" alt="$ENTRY_TITLE$"></a>

... Так что, при клике - будет переход.
...

 
Дата: Среда, 15.02.2012, 15:26 |
kimi
Рядовой
Группа: Зарегистрированные
Сообщений: 9
Награды: 0
Репутация: 0
Статус: Offline


 за это спасибо, а на каждой картинке своя ссылка, возможно ли такое?
примерно как здесь http://rozetka.com.ua/

 
Дата: Среда, 15.02.2012, 16:25 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 kimi,
Quote (kimi)
за это спасибо, а на каждой картинке своя ссылка, возможно ли такое?

Да, возможно.
Типа:
Code
<div class="bigImgBox"><a href="#"><img id="bigImg" src="/_example/_img/_anime/_01_800x600.jpg" alt="" /></a></div>
<div class="thumbs">
<a rel="http://likbezz.ru/forum/60-345-3464-16-1305302455" href="/_example/_img/_anime/_01_800x600.jpg"><img src="/_example/_img/_anime/_01_800x600.jpg" width="100" alt="" /></a>
<a rel="http://likbezz.ru/forum/60-345-3465-16-1305303471" href="/_example/_img/_anime/_02_800x600.jpg"><img src="/_example/_img/_anime/_02_800x600.jpg" width="100" alt="" /></a>
<a rel="http://likbezz.ru/forum/60-345-3479-16-1305321474" href="/_example/_img/_anime/_03_800x600.jpg"><img src="/_example/_img/_anime/_03_800x600.jpg" width="100" alt="" /></a>
<a rel="http://likbezz.ru/forum/60-345-6995-16-1329298301" href="/_example/_img/_anime/_04_800x600.jpg"><img src="/_example/_img/_anime/_04_800x600.jpg" width="100" alt="" /></a>
<a rel="http://likbezz.ru/forum/60-345-1" href="/_example/_img/_anime/_05_800x600.jpg"><img src="/_example/_img/_anime/_05_800x600.jpg" width="100" alt="" /></a>
</div>

Code
<script type="text/javascript">
$(function(){
$('.thumbs a').click(function(){el=this,obj=$('#bigImg');
obj.attr({src:this.href,alt:this.title||' '}).parent().attr('href',this.rel||'#');
return false;
});
});
</script>

Где:
Ссылка имеет вид:
Quote (Code)
<a rel="http://likbezz.ru/forum/60-345-1" href="/_example/_img/_anime/_05_800x600.jpg"><img src="/_example/_img/_anime/_05_800x600.jpg" width="100" alt="" /></a>

Где:
rel="http://likbezz.ru/forum/60-345-1" - в «rel» пишем ссылку, куда будем отправлять пользователя по клику на большой картинке ...
...

Типа пример:
☑ Смена большой картинки при клике на превью (Change Thumbs v2) ...
...

 
Дата: Среда, 15.02.2012, 17:25 |
kimi
Рядовой
Группа: Зарегистрированные
Сообщений: 9
Награды: 0
Репутация: 0
Статус: Offline


 большое спасибо, все получилось

 
Дата: Среда, 18.04.2012, 13:36 |
Генерал-майор
Группа: Проверенные
Сообщений: 386
Награды: 1
Репутация: 0
Статус: Offline


 А возможно ли увеличеть колличество фото? Т.е: сделать ротатор маленьких картинок "стрелка в лево - право", при нажатии в право следующие 4 картинки, в лево - предыдущие 4.
на сайте бесплатных шоблонов, я вытащил "подходящий" ротатор, но в него не удается "всунуть" данный скрипт. Помогите пожалуйста. cry



 
Дата: Среда, 18.04.2012, 13:42 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 igrok,
Quote (igrok)
А возможно ли увеличеть колличество фото? Т.е: сделать ротатор маленьких картинок "стрелка в лево - право", при нажатии в право следующие 4 картинки, в лево - предыдущие 4.

Можно.
...
Quote (igrok)
на сайте бесплатных шоблонов, я вытащил "подходящий" ротатор, но в него не удается "всунуть" данный скрипт

Поищите другой, который не нужно переделывать.
Благо - их немерено.

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Смена большой картинки при клике на превью. Как? (Что бы при клике на маленькие фото, они занимали место больш)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия