- Не "на фотошопе", а "в фотошопе", удобней всего сохранять с прозрачным фоном в PDF формате - это не такие тяжелые файлы, да и смотрятся довольно неплохо, сохраняя преемственность (фон сайта просвечивает сквозь них с заданной прозрачностью).
- На сайт удобней вставлять уменьшенные изображения, чтоб при нажатии открывались или скачивались нормальные полноценные картинки - при такой структуре сайт будет открываться быстро, пользователь будет видеть не саму картинку, а т.н. "превью", если решит, что для него картинка интересна - увеличит, посмотрит.
- Если картинок много, удобней отображать их (превью) не сразу все, а по темам + не более 15-20 на странице с возможностью листинга галереи.
- Увеличенная картинка должна открываться в этом же окне (проявляющийся DIV), а не в новом окне (новой вкладке), т.к. иначе будет тратиться много времени на открытие.
- Возможно использовать эффекты появления / исчезания картинок при листинге, но можно и без них.
<center><img id="foto1" src="/Foto/f1.gif" style="width:30%" onclick="document.getElementById('big').src=this.src+'.png'">
<img id="foto2" src="/Foto/f2.gif" style="width:30%" onclick="document.getElementById('big').src=this.src+'.png'">
<img id="foto3" src="/Foto/f3.gif" style="width:30%" onclick="document.getElementById('big').src=this.src+'.png'"><br>
<img id="foto4" src="/Foto/f4.gif" style="width:30%" onclick="document.getElementById('big').src=this.src+'.png'">
<img id="foto5" src="/Foto/f5.gif" style="width:30%" onclick="document.getElementById('big').src=this.src+'.png'">
<img id="foto6" src="/Foto/f6.gif" style="width:30%" onclick="document.getElementById('big').src=this.src+'.png'"><br>
<img id="big" src="/Foto/f0.gif.png" style="width:90%"><br>
<a href="#" onclick="document.getElementById('foto1').src='/Foto/f1.gif';document.getElement<wbr />ById('foto2').src='/Foto/f2.gif';document.getElementById('foto3').src='/Foto/f3.g<wbr />if';document.getElementById('foto4').src='/Foto/f4.gif';document.getElementById('<wbr />foto5').src='/Foto/f5.gif';document.getElementById('foto6').src='/Foto/f6.gif';do<wbr />cument.getElementById('big').src='/Foto/f0.gif.png'">1</a>
<a href="#" onclick="document.getElementById('foto1').src='/Foto/f7.gif';document.getElement<wbr />ById('foto2').src='/Foto/f8.gif';document.getElementById('foto3').src='/Foto/f9.g<wbr />if';document.getElementById('foto4').src='/Foto/f10.gif';document.getElementById(<wbr />'foto5').src='/Foto/f11.gif';document.getElementById('foto6').src='/Foto/f12.gif'<wbr />;document.getElementById('big').src='/Foto/f0.gif.png'">2</a>
<a href="#" onclick="document.getElementById('foto1').src='/Foto/f13.gif';document.getElemen<wbr />tById('foto2').src='/Foto/f14.gif';document.getElementById('foto3').src='/Foto/f1<wbr />5.gif';document.getElementById('foto4').src='/Foto/f16.gif';document.getElementBy<wbr />Id('foto5').src='/Foto/f17.gif';document.getElementById('foto6').src='/Foto/f18.g<wbr />if';document.getElementById('big').src='/Foto/f0.gif.png'">3</a></center>
или примерно так ^
Здесь ^ превью сохранены в папке Foto с расширением gif, а полноформатные изображения с теми-же именами, но с расширением gif.png (по факту - файлы-картинки в формате png). При нажатии на превью, полноформатное изображение появляется в виде картинки чеуть ниже, в 3 раза больше, чем превью. Можно поиграться со стилями (курсор при наведении, например). Можно сделать, чтоб полноформат открывался по нажатию в соседней вкладке (если он не в 3 раза, а в 10-50 раз больше, это может быть актуальным) и пр.
