Просмотр фотографий

[art-Limon]

Приветствую!

Мне необходимо разместить несколько фотографий на странице и так, чтобы несколько превьюшек, а при клике на превью - большая фото менялась.

Реализовала вот так: http://garant-bryansk.ru/service/online-seminar/

<div class="block" align="center">
<a href="#" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/1s.jpg'"
onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/1.jpg';">
<img name="preview1" src="http://garant-bryansk.ru/img/img-sem/1s.jpg"></a>

<a href="#" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/2s.jpg'"
onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/2.jpg';">
<img name="preview1" src="http://garant-bryansk.ru/img/img-sem/2s.jpg"></a>

<a href="#" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/3s.jpg'"
onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/3.jpg';">
<img name="preview1" src="http://garant-bryansk.ru/img/img-sem/3s.jpg"></a>

<a href="#" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/4s.jpg'"
onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/4.jpg';">
<img name="preview1" src="http://garant-bryansk.ru/img/img-sem/4s.jpg"></a>
<br>
<img name="preview" src="http://garant-bryansk.ru/img/img-sem/1.jpg">
</div>

НО! при клике на следующую превью - хоть фото и меняется, пользователя перекидывает на шапку, в начало страницы. Как это исправить?

Edited December 17, 2010 by art-Limon

[eVErl@Sting]

Встречал такое, там в JS где то указана ссылка при нажатии на картинку href="#" или href=""

Могу посоветовать той таблице или блоку где у тебя галерея находиться указать к примеру id="foto" и в ссылке в js скрипте найти href="#" или href="" и указать там href="#foto" ну т.е. сделать что то типа якоря, чтобы на месте оставаться.

Нафига кстати так шапку засорять и столько варификаций делать?

<meta name="google-site-verification" content="9iVHlEiP7Cnp6veXxXTOahjY0WXIB3ec5PugwwmX1Vo" />
<meta name='yandex-verification' content='54c732302d864f7c' />
<meta name="google-site-verification" content="DESQd51_Ru-7dW3geId_JDdmTWIQpGC8O4glyqJNWBg" />
<meta name='yandex-verification' content='59ad9f243f34cf7c' />
<meta name="google-site-verification" content="0GhsDaAbj8tK_vkZ62Jr-ldrK8-HKvzrV_cmyD0VdGQ" />

Вид ссылки твоей:

<a href="#" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/1s.jpg'" onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/1.jpg';">
<img name="preview1" src="http://garant-bryansk.ru/img/img-sem/1s.jpg"/>
</a>

вот как раз из-за href="#" такой касяк и выходит

<div class="block" id="foto" align="center">
<a href="#foto" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/1s.jpg'" onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/1.jpg';"> <img name="preview1" src="5654645645_files/1s000000.jpg"></a><a href="#foto" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/2s.jpg'" onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/2.jpg';"> <img name="preview1" src="5654645645_files/2s000000.jpg"></a><a href="#foto" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/3s.jpg'" onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/3.jpg';"> <img name="preview1" src="5654645645_files/3s000000.jpg"></a><a href="#foto" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/4s.jpg'" onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/4.jpg';"> <img name="preview1" src="5654645645_files/4s000000.jpg"></a>
<p><img name="preview" src="5654645645_files/10000000.jpg">
</div>

вот так сделай, но это быстрый фикс, не исключаю того что можно найти решение получше.

[art-Limon]

Спасибо. Такое решение, конечно, уже лучше.. (внесла изменения http://garant-bryansk.ru/service/online-seminar/), но..

Как пользователь, желающий посмотреть фото, я прокручиваю страницу так, чтобы они были по центру. При просмотре их прижимает вверх страницы, а хочется, чтобы они остались на прежнем месте (серединка экрана на глазок пользователя)..

*Шапку почистила)

[eVErl@Sting]

Уберите id="foto" и где ссылка поставьте везде <a href="java script:void(null);"

Edited December 17, 2010 by eVErl@Sting

[eVErl@Sting]

<div class="block" align="center">
<a href="java script:void(null);" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/1s.jpg'" onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/1.jpg';"> <img name="preview1" src="5654645645_files/1s000000.jpg">
</a>
<a href="java script:void(null);" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/2s.jpg'" onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/2.jpg';"> <img name="preview1" src="5654645645_files/2s000000.jpg">
</a>
<a href="java script:void(null);" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/3s.jpg'" onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/3.jpg';"> <img name="preview1" src="5654645645_files/3s000000.jpg">
</a>
<a href="java script:void(null);" onmouseout="document.preview1.src='http://garant-bryansk.ru/img/img-sem/4s.jpg'" onclick="document.preview.src='http://garant-bryansk.ru/img/img-sem/4.jpg';"> <img name="preview1" src="5654645645_files/4s000000.jpg">
</a>
</div>

Edited December 17, 2010 by eVErl@Sting

[Graph]

а сделать по умному (конечно сейчас уже редко яваскипт выключает) в href прописать адрес реального изображения а онклик вызвать функцию которая берет ссылку из href и подстваляет изображение в нужное место, а чтобы не переходило по ссылке в этой самой функции return false.

[art-Limon]

Спасибо, возьму на вооружение.

[eVErl@Sting]

ну ты так и не исправила на ссылку "java script:void(null);"