Создание галереи

@King Leonidas · Регистрация: 09.05.2012

Author24 — интернет-сервис помощи студентам

Нужна помощь в создании небольшой "галлереи". Сразу о том что должно получиться: миниатюры располагаются в блоке(рис.1), при нажатии на одну из них, она открываеться во весь блок(рис.2).
При повторном нажатии возвращаемся обратно к миниатюрам. Важно чтобы минитиатюры открывались именно во весь блок, не больше и не меньше.
Искал много решений на jquery и js. Может это можно реализовать и проще не знаю. Но ничего похожего не находил. Либо было много лишнего, но так как в js плохо разбираюсь реализовать не получается.

@vantyz · 05.09.2012, 20:56

а зачем сразу на java то???

@newJS · 06.09.2012, 10:26

Сообщение от vantyz

зачем сразу на java то???

потому что при клике, не наведении. При наведении нет решения. В центр не попадёшь.

а где написано java?

плохо что царь Леонид счёл не царским делом сказать размеры и количество.

Добавлено через 1 час 7 минут
по простому

HTML5

<table id="slyTaBlya">
<tr>
<td><img src="../pics/pic01.jpg" alt=""></td>
<td><img src="../pics/pic02.jpg" alt=""></td>
<td><img src="../pics/pic03.jpg" alt=""></td>
<td><img src="../pics/pic04.jpg" alt=""></td>
<td><img src="../pics/pic05.jpg" alt=""></td>
</tr>
<tr>
<td><img src="../pics/pic06.jpg" alt=""></td>
<td><img src="../pics/pic07.jpg" alt=""></td>
<td><img src="../pics/pic08.jpg" alt=""></td>
<td><img src="../pics/pic09.jpg" alt=""></td>
<td><img src="../pics/pic10.jpg" alt=""></td>
</tr>
<tr>
<td><img src="../pics/pic11.jpg" alt=""></td>
<td><img src="../pics/pic12.jpg" alt=""></td>
<td><img src="../pics/pic13.jpg" alt=""></td>
<td><img src="../pics/pic14.jpg" alt=""></td>
<td><img src="../pics/pic15.jpg" alt=""></td>
</tr>
<tr>
<td><img src="../pics/pic16.jpg" alt=""></td>
<td><img src="../pics/pic17.jpg" alt=""></td>
<td><img src="../pics/pic18.jpg" alt=""></td>
<td><img src="../pics/pic19.jpg" alt=""></td>
<td><img src="../pics/pic20.jpg" alt=""></td>
</tr></table>

CSS

#slyTaBlya {margin:100px auto auto 300px;}
#slyTaBlya {border-collapse:collapse; position:relative; top:0; left:0;}
#slyTaBlya td {border:1px solid black; padding:5px;}
 
#slyTaBlya img {vertical-align:top; cursor:pointer; border:0;}
#slyTaBlya img.bigP {width:507px; height:388px; position:absolute; top:0; left:0;}
 
#slyTaBlya img, #slyTaBlya td {width:90px; height:86px;}

Javascript

(function(){
 
onload=function(){
var m, k;
m=document.getElementById("slyTaBlya").getElementsByTagName("img");
k=m.length;
while(k--){m[k].onclick=bigPic;};
 };
 
function bigPic(){
if(this.className=="bigP"){this.className="";}
else{this.className="bigP";};
 };
 
 
 })();

@King Leonidas · 06.09.2012, 20:33 **[ТС]**

newJS,
Пример рабочий и суть ты уловил. Но есть большое "но": как я понял js просто растягивает миниатюру. Тоесть если я помещю фото, то естественно при увеличении оно будет размазано. Как это можно исправить?

@newJS · 07.09.2012, 07:47

В данном случае наоборот, картинка нормального, правильного размера и она сжимается в иконку. Или использовать пару small -> big, немного скрипт изменить и с именами заморочиться.
Скрипт простой и по быстрому, чё с него взять.

@King Leonidas · 08.09.2012, 14:59 **[ТС]**

newJS,
После того как тебе написал, разобрался что перепутал на счет изображений. То что он простой это даже хорошо. Мне и нужна была простая галлерея. Все картинки четкие получаюся, добавил в CSS пару строк, кое-что поменял. Смотриться отлично. Побольше бы в инете таких простых скриптов. И таких людей) Времени не много свободного, но понял что пора изучить Js. Вообщем пошел учить) Спасибо большое за помощь!

@King Leonidas · 09.09.2012, 22:24 **[ТС]**

newJS,
Я конечно начал изучать, но еще не силен в нем) Вот возникла еще одна проблема. У меня в документе распологаються 2 такие галереи. И во второй не работает увеличение. Как я понял это из-за того, что у getElementById должен быть уникальный id. Вообщем дальше погуглил и понял, что надо менять id на class, тогда можно будет задать несколько классов для галерей и прописать их в js (там ведь цикл?). Вообщем пробывал по разному ничего не выходит. В конце концов запутался. Нужна помощь!

@~~Notortep~~ · 09.09.2012, 23:58

King Leonidas, id на класс менять не надо.

поменяйте лучше на name.
и воспользуйесь методом getElementsByName ()

@newJS · 10.09.2012, 06:41

только ид разные

HTML5

<table id="slyTaBlya1">
<tr>
....
</tr></table>
 
<table id="slyTaBlya2">
<tr>
.....
</tr></table>

здесь тоже только второе ид добавилось
если будет разное количество картинок, в css нужно будет размеры подправить, каждому свои, в остальном само работает

CSS

#slyTaBlya1, #slyTaBlya2 {margin:100px auto auto 300px;}
#slyTaBlya1, #slyTaBlya2 {border-collapse:collapse; position:relative; top:0; left:0;}
#slyTaBlya1 td, #slyTaBlya2 td {border:1px solid black; padding:5px;}
 
#slyTaBlya1 img, #slyTaBlya2 img {vertical-align:top; cursor:pointer; border:0;}
#slyTaBlya1 img.bigP, #slyTaBlya2 img.bigP {width:507px; height:388px; position:absolute; top:0; left:0;}
 
#slyTaBlya1 img, #slyTaBlya1 td, #slyTaBlya2 img, #slyTaBlya2 td {width:90px; height:86px;}

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

Javascript

onload=function(){
var m, k;
m=document.getElementById("slyTaBlya1").getElementsByTagName("img");
k=m.length;
while(k--){m[k].onclick=bigPic;};
m=document.getElementById("slyTaBlya2").getElementsByTagName("img");
k=m.length;
while(k--){m[k].onclick=bigPic;};
 };

P.S.

Сообщение от newJS

плохо что царь Леонид счёл не царским делом сказать размеры и количество.

вот оно боком полезло, это чтобы все головой думали прежде чем писать

@King Leonidas 0 / 0 / 1 Регистрация: 09.05.2012 Сообщений: 33
		1
	Создание галереи 05.09.2012, 18:43. Показов 4534. Ответов 8 Метки нет (Все метки) Нужна помощь в создании небольшой "галлереи". Сразу о том что должно получиться: миниатюры располагаются в блоке(рис.1), при нажатии на одну из них, она открываеться во весь блок(рис.2). При повторном нажатии возвращаемся обратно к миниатюрам. Важно чтобы минитиатюры открывались именно во весь блок, не больше и не меньше. Искал много решений на jquery и js. Может это можно реализовать и проще не знаю. Но ничего похожего не находил. Либо было много лишнего, но так как в js плохо разбираюсь реализовать не получается. Миниатюры 0

@vantyz 54 / 54 / 2 Регистрация: 04.03.2012 Сообщений: 495
	05.09.2012, 20:56	2
	а зачем сразу на java то??? 0

@King Leonidas 0 / 0 / 1 Регистрация: 09.05.2012 Сообщений: 33
	06.09.2012, 20:33 [ТС]	4
	newJS, Пример рабочий и суть ты уловил. Но есть большое "но": как я понял js просто растягивает миниатюру. Тоесть если я помещю фото, то естественно при увеличении оно будет размазано. Как это можно исправить? 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	07.09.2012, 07:47	5
	В данном случае наоборот, картинка нормального, правильного размера и она сжимается в иконку. Или использовать пару small -> big, немного скрипт изменить и с именами заморочиться. Скрипт простой и по быстрому, чё с него взять. 1

@King Leonidas 0 / 0 / 1 Регистрация: 09.05.2012 Сообщений: 33
	08.09.2012, 14:59 [ТС]	6
	newJS, После того как тебе написал, разобрался что перепутал на счет изображений. То что он простой это даже хорошо. Мне и нужна была простая галлерея. Все картинки четкие получаюся, добавил в CSS пару строк, кое-что поменял. Смотриться отлично. Побольше бы в инете таких простых скриптов. И таких людей) Времени не много свободного, но понял что пора изучить Js. Вообщем пошел учить) Спасибо большое за помощь! 0

@King Leonidas 0 / 0 / 1 Регистрация: 09.05.2012 Сообщений: 33
	09.09.2012, 22:24 [ТС]	7
	newJS, Я конечно начал изучать, но еще не силен в нем) Вот возникла еще одна проблема. У меня в документе распологаються 2 такие галереи. И во второй не работает увеличение. Как я понял это из-за того, что у getElementById должен быть уникальный id. Вообщем дальше погуглил и понял, что надо менять id на class, тогда можно будет задать несколько классов для галерей и прописать их в js (там ведь цикл?). Вообщем пробывал по разному ничего не выходит. В конце концов запутался. Нужна помощь! 0

@~~Notortep~~ Заблокирован
	09.09.2012, 23:58	8
	King Leonidas, id на класс менять не надо. поменяйте лучше на name. и воспользуйесь методом getElementsByName () 0

	10.09.2012, 06:41

Опции темы