| |
|
|
| | Есть одна галерея - нажимая на маленькие картинки браузер без перезагрузки показывает ее в большом размере. Я не могу доработать ее.
На странице http://vavto.ho.ua/raz/есть рабочая галерея,но ее нужно немножко изменить. Нажимая на миниатюры без перезагрузки меняется большая картинка, когда нажимаешь на большую экран затемняется и показывается НЕ эта большая картинка, а вся галерея сначала. А нужно когда большая пятая например, нажимая на нее экран затемнялся и показывалась она же пятая картинка.
Что непонятно, объясню.
Помогите пожалуйста !
Архив со скриптом : http://vavto.ho.ua/a.zip | |
| |
|
|
| |
|
|
| |
для: volodumir
(31.08.2010 в 00:40)
| | | >"Не могу объединить две галереи на Prototype и jQuery"
Выбросьте и то, и другое.
И напишите нужный Вам скрипт на чистом JS. Например, так (в самом первом приближении):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<base href="http://vavto.ho.ua/raz/">
<style>
body {margin: 1px; padding: 0}
#mCnt {text-align: center}
#mCnt img {margin: 4px 3px 0 0; padding: 4px; border: 1px solid #ccc; width: 90px; height: 75px}
#mCnt #largeImg {margin: 0; width: 399px; height: 300px}
</style>
<script>
onload = function ()
{
for (var o = document.getElementById ('mCnt').getElementsByTagName ('IMG'), j = 1, l = o.length; j < l; j++)
{o [j].onmouseover = fOver; o [j].onmouseout = fOut; o [j].onclick = fClick}
gLI = document.getElementById ('largeImg'); gLI.onclick = fShow;
}
function fOver (ev) {var e = window.event || ev, o = e.srcElement || e.target; o.style.borderColor = '#ff9900'}
function fOut (ev) {var e = window.event || ev, o = e.srcElement || e.target; o.style.borderColor = '#ccc'}
function fClick (ev) {var e = window.event || ev, o = e.srcElement || e.target; gLI.src = o.src.replace (/thumb\./, 'lg.')}
function fShow ()
{
document.body.style.backgroundColor = '#000';
document.getElementById ('mCnt').style.visibility = 'hidden';
var DV = document.createElement ('div'); DV.id = 'mDV';
with (DV.style) {backgroundColor = '#fff'; position = 'absolute'; top = '100px'; padding = '10px'; visibility = 'hidden'}
DV.onclick = function ()
{
document.body.removeChild (document.getElementById ('mDV'));
document.body.style.backgroundColor = '#fff';
document.getElementById ('mCnt').style.visibility = 'visible';
}
var PIC = document.createElement ('img'); PIC.id = 'mPIC';
PIC.onload = function ()
{
var o = document.getElementById ('mDV');
with (o.style)
{
width = document.getElementById ('mPIC').offsetWidth + 'px';
left = (document.body.offsetWidth - o.offsetWidth) / 2 + 'px';
visibility = 'visible';
}
}
DV.appendChild (PIC); document.body.appendChild (DV);
document.getElementById ('mPIC').src = gLI.src;
}
</script>
</head><body>
<div id="mCnt"
><img src="images/img2-lg.jpg" id="largeImg"><br
><img src="images/img2-thumb.jpg" style="margin-left: 3px"
><img src="images/img3-thumb.jpg"
><img src="images/img4-thumb.jpg"
><img src="images/img5-thumb.jpg"><br
><img src="images/img4-thumb.jpg" style="margin-left: 3px"
><img src="images/img3-thumb.jpg"
><img src="images/img2-thumb.jpg"
><img src="images/img3-thumb.jpg"><br
></div>
</body></html>
|
| |
| |
|
|
