Помогите с выбором галереи jquery

[Makha]

Есть необходимость в создании галереи с тремя видами изображения: иконка, изображение и большое изображение. Связаны тройками.
Функциональность: Нажимаем иконку - меняется изображение в ячейке. (пара иконка - изображение). Нажимаем на изображение - открывается галерея больших изображений с возможностью пролистать по всей галерее. ( собственно вот тут я застряла на самописной... по одной - все ок, но при подключении спрятанного массива - дубляжи вылазят т.к. делаю я простой заменой атрибута)

Может видели готовые похожие решения?

@темы: JavaScript

Comments

[alhames]

Я всегда сам писал.. У нашего дизайнера каждый раз функционал обновляется, потому стандартного скрипта написать не удалось

[Makha]

А я только учусь и поэтому пути у меня странны и не изведаны
За ночь возникла идея сделать из кучки ссылок массив и поиском находить повтор... И убирать его из массива. Теперь буду искать пример создания массива по началу названию класса (или ИД)... Где-то же видела!

[alhames]

Покажите хоть код - может быть помогу

[Makha]

Попробуем разобраться Это то, что сейчас у меня работает... + плагин лайтбокса, в который я не лезла и который вызывается нажатием на #view_big.

function l_image(a, b, id) {
	$("#item_img").attr( {src : a});
	$("#view_big").attr( {href : b});
};

Вот кусок страницы в урезаном виде:

Выводим картинку: 
<img id="item_img" alt="{attr/name/value}" src="/pics/items/{attr/image/value}" />

Моя скрытая галерея, пока я сюда положила все большие, что есть... Вот из них нужно будет убирать лишнюю. Надо как-то по href находить и потом rel убирать... но я наверное не грамотно писала - у меня не получалось:

<div class="hiddenc">
			<a class="mas_1" href="/pics/items/{group/field[constant/name='bigimage1']/value}"  rel="lightbox1"></a>	
			<a  class="mas_2" href="/pics/items/{group/field[constant/name='bigimage2']/value}"  rel="lightbox1"></a>
			<a class="mas_3" href="/pics/items/{group/field[constant/name='image_big']/value}"  rel="lightbox1"></a>
</div>

Вызов самой галереи:
<a id="view_big" href="/pics/items/{group/field[constant/name='image_big']/value}" class="lups" rel="lightbox1" alt="{attr/name/value}"><img alt="{attr/name/value}" src="/pics/lups.png" width="30px" height="27px"/></a>	

Иконки, с помощью которых переключаются картинки и меняется ссылка на вызове окна:


		<div id="icon_gallerey">

		<a id="ico"	href="javasсript:l_image ('/pics/items/{attr/image/value}', '/pics/items/{group/field[constant/name='image_big']/value}', 'ico')"	alt="/pics/items/{attr/image/value}">
		<img src="/pics/items/{attr/icon/value}" class="sel" />
	</a>

	<a id="ico1" href="javasсript:l_image ('/pics/items/{/document/content/content:data/group/field[constant/name='image1']/value}', '/pics/items/{/document/content/content:data/group/field[constant/name='bigimage1']/value}', 'ico1')" alt="/pics/items/{/document/content/content:data/group/field[constant/name='ico1']/value}">
		<img src="/pics/items/{/document/content/content:data/group/field[constant/name='ico1']/value}" />
	</a>

		<a id="ico2" 			href="javasсript:l_image ('/pics/items/{/document/content/content:data/group/field[constant/name='image2']/value}', '/pics/items/{/document/content/content:data/group/field[constant/name='bigimage2']/value}', 'ico2')"	alt="/pics/items/{/document/content/content:data/group/field[constant/name='ico2']/value}">
			<img src="/pics/items/{/document/content/content:data/group/field[constant/name='ico2']/value}" />
		</a>

       </div>
	

Все просто как 5 копеек - что еще ждать от того, кто только учится)

[Makha]

Вот во что вылилось:

function l_image(a, b, id) {

	$("#item_img").attr( {src : a});
	
	$("#view_big").attr('temp_id',id);
	
};


function ShowGallery() {
	var click_id=$('#view_big').attr('temp_id');
	$('a#'+click_id).click();
}

и в коде поменяла только вызов:

<a id="view_big" href="javasсript:ShowGallery()" class="lups" temp_id='ico'><img alt="{attr/name/value}" src="/pics/lups.png" width="30px" height="27px"/></a>	
			

а не, еще ид повесила вместо классов:

<div class="hiddenc" id="galll">
			<a id="ico" href="/pics/items/{group/field[constant/name='image_big']/value}" rel="lightbox1"></a>
			<a id="ico1" href="/pics/items/{group/field[constant/name='bigimage1']/value}" rel="lightbox1"></a>	
			<a id="ico2" href="/pics/items/{group/field[constant/name='bigimage2']/value}" rel="lightbox1"></a>
			
			</div>

Работает так, как хотелось...

Теперь думаю над следующим пунктом программы... Мне нужно скрывать значок лупы, если загружаемая картинка меньше 300 пикселей по ширине.. >_<

[Inty]

Makha, либо при выводе в php узнаете через getimagesize и просто изначально не выводим лупу.
Либо через jquery и потом убираем-рисуем лупу. (c javasсript смысл тот же)

// берем все необходимые нам картинки
var $img = $('img');
 
// ждем загрузки картинки браузером
$img.load(function(){
    // удаляем атрибуты width и height
    $(this).removeAttr("width")
           .removeAttr("height")
           .css({ width: "", height: "" });
 
    // получаем заветные цифры
    var width  = $(this).width();
    var height = $(this).height();
});
 
// для тех браузеров, которые подгрузку с кеша не считают загрузкой, пишем следующий код
var src  = $img.attr('src');
              $img.attr('src', '');
              $img.attr('src', src);

[alhames]

Ох, что-то я сейчас совсем не соображаю.. Может к ночи голова пройдет(

Мне нужно скрывать значок лупы, если загружаемая картинка меньше 300 пикселей по ширине.. >_<

Можно пойти от обратного: изначально загружать скрытую лупу, а потом на load навешать fadeIn лупы..
Только юазть load не JQuery, а объекта Image.

[alhames]

Такс.. Смотрел смотрел код.. Так и не понял сути.
1) Зачем вы используете эту устаревшую конструкцию «href="javasсript:function_name()"»? У любого элемента есть событие onclick, на которое можно навесить необходимую функцию.
2) Для того чтобы при клике на ссылку браузер не пытался открыть адрес из href нужно в функции, навешанной на onckick делать «return false»
3) Храните все параметры произвольных атрибутах. Например, я бы хранил так

<a href="#show" class="show-img" data-src="/path/to/img" data-id="temp_id">click me</a>

И на JQuery навесил бы событие:

$('.show-img').click(function(){
	$("#item_img").attr( {src : $(this).attr('data-src')});
	$("#view_big").attr('temp_id', $(this).attr('data-id'));
	return false;
});

[Makha]

Храните все параметры произвольных атрибутах.

Вот это нужно вбить себе в голову... Т_Т Тьфу-тьфу-тьфу, приняли галерею