<script type="text/javascript">
function doPic(imgName) {
imgOn = ("big/" + imgName);
document.getElementById('zoom').src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script: doPic('01.jpg');"][/url]
[url="java script: doPic('02.jpg');"][/url]
[url="java script: doPic('03.jpg');"][/url]
...
</div>
Создать фотоальбом!
Здравствуйте, товаришчи!
Хочу я сделать, значится, вот что:
На страничке сделать галерею фоток (штуки по 4 в ряд и n-ное кол - ко рядов). Это будут уменьшенные копии изображений. Они хранятся в папке, скажем, photo_s. Сами фотки лежат в папке photo.
НУЖНО, чтобы при нажатии на картинку на этой же странице (сверху стр.) появлялся рисунок в полную величину. Кликаешь на другой уменьшенный рисунок - место первого (в полную величину) должен занять он. Можете код хоть примерно набросать?
В общем, галерея, и все рисунки в натуральную величину открываются в одном месте на этой же странице...
Простите за нелитературный язык... Жду ваших ответов с нетерпением!
Всем СПАСИБО!
Хочу я сделать, значится, вот что:
На страничке сделать галерею фоток (штуки по 4 в ряд и n-ное кол - ко рядов). Это будут уменьшенные копии изображений. Они хранятся в папке, скажем, photo_s. Сами фотки лежат в папке photo.
НУЖНО, чтобы при нажатии на картинку на этой же странице (сверху стр.) появлялся рисунок в полную величину. Кликаешь на другой уменьшенный рисунок - место первого (в полную величину) должен занять он. Можете код хоть примерно набросать?
В общем, галерея, и все рисунки в натуральную величину открываются в одном месте на этой же странице...
Простите за нелитературный язык... Жду ваших ответов с нетерпением!
Всем СПАСИБО!
Короче, сверху должна быть "область", где будут выводиться фотографии с этой же страницы (те, на которые кликнут мышкой). Причем кликать нужно будет на уменьшенную копию (хранятся в одной папке), а вывести для просмотра нормального размера (хранятся в другой папке).
Как бы это так сделать, да еще чтобы код покороче...
ПОМОГИТЕ!!!
Как бы это так сделать, да еще чтобы код покороче...
ПОМОГИТЕ!!!
Например так:
Код:
<script language="JavaScript">function doPic(imgName) {
imgOn = ("big/" + imgName); document.mainpic.src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script:doPic('00.jpg');"][/url]
[url="java script:doPic('01.jpg');"][/url]
[url="java script:doPic('02.jpg');"][/url]
...
</div>
imgOn = ("big/" + imgName); document.mainpic.src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script:doPic('00.jpg');"][/url]
[url="java script:doPic('01.jpg');"][/url]
[url="java script:doPic('02.jpg');"][/url]
...
</div>
Цитата:
Originally posted by Nevidimk@
Короче, сверху должна быть "область", где будут выводиться фотографии с этой же страницы (те, на которые кликнут мышкой). Причем кликать нужно будет на уменьшенную копию (хранятся в одной папке), а вывести для просмотра нормального размера (хранятся в другой папке).
Как бы это так сделать, да еще чтобы код покороче...
ПОМОГИТЕ!!!
Короче, сверху должна быть "область", где будут выводиться фотографии с этой же страницы (те, на которые кликнут мышкой). Причем кликать нужно будет на уменьшенную копию (хранятся в одной папке), а вывести для просмотра нормального размера (хранятся в другой папке).
Как бы это так сделать, да еще чтобы код покороче...
ПОМОГИТЕ!!!
Ещё учти максимальный размер большой картинки, т.к. всё из-за большой картинки может просто разьехаться. Иногда бывает проще выводить в новое окно (popup) большую картинку.
Цитата:
Originally posted by Phaust
Например так:
Например так:
Код:
<script language="JavaScript">function doPic(imgName) {
imgOn = ("big/" + imgName); document.mainpic.src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script:doPic('00.jpg');"][/url]
[url="java script:doPic('01.jpg');"][/url]
[url="java script:doPic('02.jpg');"][/url]
...
</div>
imgOn = ("big/" + imgName); document.mainpic.src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script:doPic('00.jpg');"][/url]
[url="java script:doPic('01.jpg');"][/url]
[url="java script:doPic('02.jpg');"][/url]
...
</div>
Понятненько... Но что - то не то, не получается.
На месте первого рисунка (big/01.jpg) должны открываться на этой же странице рисунок 01, 02, 03, ..., на который кликнешь (по собств. выбору, а не по очереди). А сами рисунки на странице - уменьшенные копии из папки small. Но при клике на них ДОЛЖЕН открываеться рисунок в натур. величину, причем все время на месте рисунка 1!
Надеюсь, понятно... ПОМОГИТЕ!!!
P. S. Про popup оно понятно... Но нужно именно так...
Цитата:
Originally posted by Nevidimk@
Понятненько... Но что - то не то, не получается.
На месте первого рисунка (big/01.jpg) должны открываться на этой же странице рисунок 01, 02, 03, ..., на который кликнешь (по собств. выбору, а не по очереди). А сами рисунки на странице - уменьшенные копии из папки small. Но при клике на них ДОЛЖЕН открываеться рисунок в натур. величину, причем все время на месте рисунка 1!
Надеюсь, понятно... ПОМОГИТЕ!!!
P. S. Про popup оно понятно... Но нужно именно так...
Понятненько... Но что - то не то, не получается.
На месте первого рисунка (big/01.jpg) должны открываться на этой же странице рисунок 01, 02, 03, ..., на который кликнешь (по собств. выбору, а не по очереди). А сами рисунки на странице - уменьшенные копии из папки small. Но при клике на них ДОЛЖЕН открываеться рисунок в натур. величину, причем все время на месте рисунка 1!
Надеюсь, понятно... ПОМОГИТЕ!!!
P. S. Про popup оно понятно... Но нужно именно так...
А оно что, не так чтоль?
Предполагается, что все маленькие картинки лежат в small/ , все большие -- в big/ .
По умолчанию стоит картинка (big/01.jpg).
Кликая на другую маленькую (например small/03.jpg), на место big/01.jpg вставляется big/03.jpg.
Цитата:
Originally posted by Phaust
А оно что, не так чтоль?
Предполагается, что все маленькие картинки лежат в small/ , все большие -- в big/ .
По умолчанию стоит картинка (big/01.jpg).
А оно что, не так чтоль?
Предполагается, что все маленькие картинки лежат в small/ , все большие -- в big/ .
По умолчанию стоит картинка (big/01.jpg).
Здесь все именно так.
Цитата:
Кликая на другую маленькую (например small/03.jpg), на место big/01.jpg вставляется big/03.jpg.
А вот тут при клике никакая картинка вообще не вставляется... =((
Пробовал и так, и сяк... Кажется...
Если не сложно, протестируй у себя и пришли код странички... Пожалуйста!!! ;)
Цитата:
Originally posted by Nevidimk@
Здесь все именно так.
А вот тут при клике никакая картинка вообще не вставляется... =((
Пробовал и так, и сяк... Кажется...
Если не сложно, протестируй у себя и пришли код странички... Пожалуйста!!! ;)
Здесь все именно так.
А вот тут при клике никакая картинка вообще не вставляется... =((
Пробовал и так, и сяк... Кажется...
Если не сложно, протестируй у себя и пришли код странички... Пожалуйста!!! ;)
Попробуй так:
Код:
Цитата:
Originally posted by Phaust
Попробуй так:
Попробуй так:
Код:
<script type="text/javascript">
function doPic(imgName) {
imgOn = ("big/" + imgName);
document.getElementById('zoom').src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script: doPic('01.jpg');"][/url]
[url="java script: doPic('02.jpg');"][/url]
[url="java script: doPic('03.jpg');"][/url]
...
</div>
function doPic(imgName) {
imgOn = ("big/" + imgName);
document.getElementById('zoom').src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script: doPic('01.jpg');"][/url]
[url="java script: doPic('02.jpg');"][/url]
[url="java script: doPic('03.jpg');"][/url]
...
</div>
КажисЬ, та же история...
Я понял в чем бок. При публикации на форум появляются пробелы в слове "джаваскрипт". Убей пробелы и все заработает:
<a href="джаваскрипт: doPic('01.jpg');">...
<a href="джаваскрипт: doPic('01.jpg');">...
Цитата:
Originally posted by Phaust
Я понял в чем бок. При публикации на форум появляются пробелы в слове "джаваскрипт". Убей пробелы и все заработает:
<a href="джаваскрипт: doPic('01.jpg');">...
Я понял в чем бок. При публикации на форум появляются пробелы в слове "джаваскрипт". Убей пробелы и все заработает:
<a href="джаваскрипт: doPic('01.jpg');">...
Вы гений, товарищ!!! Спасибо ОГРОМНОЕ за помощь! Вы действительно очень помогли! =)) !!!
МОЖНО ЛИ ПРИ ЭТОМ ОРГАНИЗОВАТЬ...
Переход в другое место того же документа.
Для организации перехода внутри одного HTML - файла мы вводим необходимый текст в двух местах:
- Записать метку в том месте HTML - файла, куда необходимо перейти.
- Записать переход на эту метку в том месте, откуда будет выполнен переход с этим проблема.
ПРИМЕР:
<A NAME=" МЕТКА "></A>
Для перехода на эту метку:
Перейти на метку.
Можно ли сделать, чтобы при клике левой кнопкой на каждый рисунок сделать переход к началу страницы (т. е. на эту самую метку) ПРИ ТОМ ЖЕ КОДЕ???
Переход в другое место того же документа.
Для организации перехода внутри одного HTML - файла мы вводим необходимый текст в двух местах:
- Записать метку в том месте HTML - файла, куда необходимо перейти.
- Записать переход на эту метку в том месте, откуда будет выполнен переход с этим проблема.
ПРИМЕР:
<A NAME=" МЕТКА "></A>
Для перехода на эту метку:
Перейти на метку.
Можно ли сделать, чтобы при клике левой кнопкой на каждый рисунок сделать переход к началу страницы (т. е. на эту самую метку) ПРИ ТОМ ЖЕ КОДЕ???
Цитата:
<script language="JavaScript">function doPic(imgName) {
imgOn = ("big/" + imgName); document.mainpic.src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script:doPic('00.jpg');"]
[/url]
[url="java script:doPic('01.jpg');"]
[/url]
[url="java script:doPic('02.jpg');"]
[/url]
...
</div>
imgOn = ("big/" + imgName); document.mainpic.src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script:doPic('00.jpg');"]
[/url] [url="java script:doPic('01.jpg');"]
[/url] [url="java script:doPic('02.jpg');"]
[/url] ...
</div>
Может, при помощи onclick???
Цитата:
Originally posted by Nevidimk@
МОЖНО ЛИ ПРИ ЭТОМ ОРГАНИЗОВАТЬ...
Переход в другое место того же документа.
Для организации перехода внутри одного HTML - файла мы вводим необходимый текст в двух местах:
- Записать метку в том месте HTML - файла, куда необходимо перейти.
- Записать переход на эту метку в том месте, откуда будет выполнен переход с этим проблема.
ПРИМЕР:
<A NAME=" МЕТКА "></A>
Для перехода на эту метку:
Перейти на метку.
Можно ли сделать, чтобы при клике левой кнопкой на каждый рисунок сделать переход к началу страницы (т. е. на эту самую метку) ПРИ ТОМ ЖЕ КОДЕ???
Может, при помощи onclick???
МОЖНО ЛИ ПРИ ЭТОМ ОРГАНИЗОВАТЬ...
Переход в другое место того же документа.
Для организации перехода внутри одного HTML - файла мы вводим необходимый текст в двух местах:
- Записать метку в том месте HTML - файла, куда необходимо перейти.
- Записать переход на эту метку в том месте, откуда будет выполнен переход с этим проблема.
ПРИМЕР:
<A NAME=" МЕТКА "></A>
Для перехода на эту метку:
Перейти на метку.
Можно ли сделать, чтобы при клике левой кнопкой на каждый рисунок сделать переход к началу страницы (т. е. на эту самую метку) ПРИ ТОМ ЖЕ КОДЕ???
Может, при помощи onclick???
Не понял вопроса?
У тебя горизонтальная прокрутка чтоль?
А.. понял. Ну да. Oнкликом. Попробуй, чего ж спрашивать, раз сам догадался?
Цитата:
Originally posted by Phaust
А.. понял. Ну да. Oнкликом. Попробуй, чего ж спрашивать, раз сам догадался?
А.. понял. Ну да. Oнкликом. Попробуй, чего ж спрашивать, раз сам догадался?
=)) А что - то не получается... ПОДСКАЖИ! ;)
Точно понял? В общем, мне нужно, чтобы при нажатии переходить к этому вот первому большому рисунку...
Цитата:
Originally posted by Nevidimk@
=)) А что - то не получается... ПОДСКАЖИ! ;)
Точно понял? В общем, мне нужно, чтобы при нажатии переходить к этому вот первому большому рисунку...
=)) А что - то не получается... ПОДСКАЖИ! ;)
Точно понял? В общем, мне нужно, чтобы при нажатии переходить к этому вот первому большому рисунку...
Код:
<a name="top"></a>
<div class="photos">
</div>
<div class="photos">
</div>
Может просто лень? :x
Чтоб не менять html, можно так:
Это просто в топ страницы. Пробелы, ясное дело, поубирай.
Код:
<script type="text/javascript">
function doPic(imgName) {
window.scroll(0,0);
imgOn = ("big/" + imgName);
document.getElementById('zoom').src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script: doPic('01.jpg');"][/url]
[url="java script: doPic('02.jpg');"][/url]
[url="java script: doPic('03.jpg');"][/url]
...
</div>
</body>
function doPic(imgName) {
window.scroll(0,0);
imgOn = ("big/" + imgName);
document.getElementById('zoom').src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script: doPic('01.jpg');"][/url]
[url="java script: doPic('02.jpg');"][/url]
[url="java script: doPic('03.jpg');"][/url]
...
</div>
</body>
Это просто в топ страницы. Пробелы, ясное дело, поубирай.
Код:
<script type="text/javascript">
function doPic(imgName) {
zoom_obj = document.getElementById('zoom');
window.scroll(0, zoom_obj.offsetTop);
imgOn = ("big/" + imgName);
zoom_obj.src = imgOn;
}</script>
function doPic(imgName) {
zoom_obj = document.getElementById('zoom');
window.scroll(0, zoom_obj.offsetTop);
imgOn = ("big/" + imgName);
zoom_obj.src = imgOn;
}</script>
Это четко к большой картинке.
Цитата:
Originally posted by Phaust
Может просто лень? :x
Код:
<a name="top"></a>
<div class="photos">
</div>
<div class="photos">
</div>
Может просто лень? :x
Может, лень... А может день студента слишком рано справлять начали... Я - то пытался сделать on click="#top" = )) И... Не получилось...
ПАСИБ!
P. S. Да мы тут только вдвоем и общаемся...
Цитата:
Originally posted by Phaust
Чтоб не менять html, можно так:
Это просто в топ страницы. Пробелы, ясное дело, поубирай.
Чтоб не менять html, можно так:
Код:
<script type="text/javascript">
function doPic(imgName) {
window.scroll(0,0);
imgOn = ("big/" + imgName);
document.getElementById('zoom').src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script: doPic('01.jpg');"][/url]
[url="java script: doPic('02.jpg');"][/url]
[url="java script: doPic('03.jpg');"][/url]
...
</div>
</body>
function doPic(imgName) {
window.scroll(0,0);
imgOn = ("big/" + imgName);
document.getElementById('zoom').src = imgOn;
}</script>
<body>
<div class="photos">
[url="java script: doPic('01.jpg');"][/url]
[url="java script: doPic('02.jpg');"][/url]
[url="java script: doPic('03.jpg');"][/url]
...
</div>
</body>
Это просто в топ страницы. Пробелы, ясное дело, поубирай.
О! Это просто великолепно!!!
Все гениальное просто...
Цитата:
Originally posted by Nevidimk@
О! Это просто великолепно!!!
Все гениальное просто...
О! Это просто великолепно!!!
Все гениальное просто...
До гениальности пока далеко. Вот еще вариант без ссылок и onClickов:
Код:
<html>
<head>
<title>Тест</title>
<script type="text/javascript">
function st_add() {
window.scroll(0,0);
document.getElementById("bigpic").src=this.src.replace('small/','big/');
}
function nonst_attach(what) {
window.scroll(0,0);
document.getElementById("bigpic").src=window.event.srcElement.src.replace('small/','big/');
}
function load() {
block = document.getElementById("pics");
imgs = block.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++)
{
if(imgs.addEventListener)
{ imgs.addEventListener("click", st_add, false); }
else if (imgs.attachEvent)
{ imgs.attachEvent("onclick", nonst_attach); }
}
}
</script>
</head>
<body onload="load();">
<div id="pics">
</div>
</body>
</html>
<head>
<title>Тест</title>
<script type="text/javascript">
function st_add() {
window.scroll(0,0);
document.getElementById("bigpic").src=this.src.replace('small/','big/');
}
function nonst_attach(what) {
window.scroll(0,0);
document.getElementById("bigpic").src=window.event.srcElement.src.replace('small/','big/');
}
function load() {
block = document.getElementById("pics");
imgs = block.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++)
{
if(imgs.addEventListener)
{ imgs.addEventListener("click", st_add, false); }
else if (imgs.attachEvent)
{ imgs.attachEvent("onclick", nonst_attach); }
}
}
</script>
</head>
<body onload="load();">
<div id="pics">
</div>
</body>
</html>