Нужна небольшая галлерея, примерно как здесь:
http://www.autotrader.com/fyc/vd...p;ref=srl#vdptop
1. Str - 18 Сентября, 2006 - 09:20:37 - перейти к сообщению
2. Дмитрий Б. - 19 Сентября, 2006 - 08:04:42 - перейти к сообщению
Str
Ссылка дохлая...
На WoWebе смотрел?
Ссылка дохлая...
На WoWebе смотрел?
3. Str - 19 Сентября, 2006 - 09:43:38 - перейти к сообщению
Нету там ничего подходящего. Опишу скрипт вкратце:
Есть таблица, в таблице 3 ячейки. В каждой ячейке по картинке. Также есть две кнопки: вперед и назад. При нажатии кнопки вперед, сбоку выезжают следующие три картинки, и так по циклу.
Есть таблица, в таблице 3 ячейки. В каждой ячейке по картинке. Также есть две кнопки: вперед и назад. При нажатии кнопки вперед, сбоку выезжают следующие три картинки, и так по циклу.
4. Дмитрий Б. - 21 Сентября, 2006 - 06:42:09 - перейти к сообщению
Str
Здесь filesNames - массив имён файлов, path - путь к картинкам, current - начальная позиция, activeImages - число отображаемых картинок, imagesShift - на сколько картинок происходит сдвиг вперёд или назад.
CODE:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
<title>Фотогалерея</title>
<script type="text/javascript">
<!--
var filesNames=
[
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg'
];
var path='images/';
var current=0, activeImages=3, imagesShift=2;
var preloadedImages;
function main()
{
var i;
preloadedImages=new Array(filesNames.length);
for (i=0; i<filesNames.length; i++)
preloadedImages[i]=new Image();
preloadCurrent();
setTimeout(preload, 1000);
}
function preloadCurrent()
{
for (var i=current; i<current+activeImages; i++)
if (!preloadedImages[i%preloadedImages.length].src)
preloadedImages[i%preloadedImages.length].src=path+filesNames[i%preloadedImages.length];
}
function preload()
{
var i, currentLoads=0;
for (i=0; i<preloadedImages.length; i++)
if (preloadedImages[i].src&&(!preloadedImages[i].complete))
currentLoads++;
for (i=current+activeImages; (currentLoads<activeImages)&&(i<preloadedImages.length); i++)
if (!preloadesImages[i].src)
{
preloadedImages[i].src=path+filesNames[i];
currentLoads++;
}
for (i=0; (currentLoads<activeImages)&&(i<current); i++)
if (!preloadesImages[i].src)
{
preloadedImages[i].src=path+filesNames[i];
currentLoads++;
}
for (i=0; i<preloadedImages.length; i++)
if (!preloadedImages[i].src)
return setTimeout(preload, 1000);
}
function back()
{
current-=imagesShift;
while (current<0)
current+=filesNames.length;
preloadCurrent();
var i, j, a;
for (i=current; (i-current)<activeImages; i++)
{
if (a=document.getElementById('image'+(i-current+1)))
a.src=preloadedImages[i%preloadedImages.length].src;
else
window.status='Ошибка при задании тегов <img>...';
}
}
function forward()
{
current+=imagesShift;
while (current>=filesNames.length)
current-=filesNames.length;
preloadCurrent();
var i, a;
for (i=current; (i-current)<activeImages; i++)
{
if (a=document.getElementById('image'+(i-current+1)))
a.srcreloadedImages[i%preloadedImages.length].src;
else
window.status='Ошибка при задании тегов <img>...';
}
}
main();
//-->
</script>
</head>
<body>
<table width="400" align="center">
<tr>
<td width="33%">
<img src="images/image1.jpg" id="image1">
</td>
<td width="33%">
<img src="images/image2.jpg" id="image2">
</td>
<td width="33%">
<img src="images/image3.jpg" id="image3">
</td>
</tr>
</table>
<input type="button" value="Назад" onclick="back();">
<input type="button" value="Вперёд" onclick="forward();">
</body>
</html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
<title>Фотогалерея</title>
<script type="text/javascript">
<!--
var filesNames=
[
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg'
];
var path='images/';
var current=0, activeImages=3, imagesShift=2;
var preloadedImages;
function main()
{
var i;
preloadedImages=new Array(filesNames.length);
for (i=0; i<filesNames.length; i++)
preloadedImages[i]=new Image();
preloadCurrent();
setTimeout(preload, 1000);
}
function preloadCurrent()
{
for (var i=current; i<current+activeImages; i++)
if (!preloadedImages[i%preloadedImages.length].src)
preloadedImages[i%preloadedImages.length].src=path+filesNames[i%preloadedImages.length];
}
function preload()
{
var i, currentLoads=0;
for (i=0; i<preloadedImages.length; i++)
if (preloadedImages[i].src&&(!preloadedImages[i].complete))
currentLoads++;
for (i=current+activeImages; (currentLoads<activeImages)&&(i<preloadedImages.length); i++)
if (!preloadesImages[i].src)
{
preloadedImages[i].src=path+filesNames[i];
currentLoads++;
}
for (i=0; (currentLoads<activeImages)&&(i<current); i++)
if (!preloadesImages[i].src)
{
preloadedImages[i].src=path+filesNames[i];
currentLoads++;
}
for (i=0; i<preloadedImages.length; i++)
if (!preloadedImages[i].src)
return setTimeout(preload, 1000);
}
function back()
{
current-=imagesShift;
while (current<0)
current+=filesNames.length;
preloadCurrent();
var i, j, a;
for (i=current; (i-current)<activeImages; i++)
{
if (a=document.getElementById('image'+(i-current+1)))
a.src=preloadedImages[i%preloadedImages.length].src;
else
window.status='Ошибка при задании тегов <img>...';
}
}
function forward()
{
current+=imagesShift;
while (current>=filesNames.length)
current-=filesNames.length;
preloadCurrent();
var i, a;
for (i=current; (i-current)<activeImages; i++)
{
if (a=document.getElementById('image'+(i-current+1)))
a.srcreloadedImages[i%preloadedImages.length].src;
else
window.status='Ошибка при задании тегов <img>...';
}
}
main();
//-->
</script>
</head>
<body>
<table width="400" align="center">
<tr>
<td width="33%">
<img src="images/image1.jpg" id="image1">
</td>
<td width="33%">
<img src="images/image2.jpg" id="image2">
</td>
<td width="33%">
<img src="images/image3.jpg" id="image3">
</td>
</tr>
</table>
<input type="button" value="Назад" onclick="back();">
<input type="button" value="Вперёд" onclick="forward();">
</body>
</html>
Здесь filesNames - массив имён файлов, path - путь к картинкам, current - начальная позиция, activeImages - число отображаемых картинок, imagesShift - на сколько картинок происходит сдвиг вперёд или назад.
5. Str - 21 Сентября, 2006 - 09:28:42 - перейти к сообщению
Сенкс огромный, это именно то, что я искал 
6. Str - 21 Сентября, 2006 - 09:34:40 - перейти к сообщению
Вот только кнопка вперед не работает и при загрузке страницы картинки появляются не сразу, а только после нажатия кнопки "назад" (ну может еще и после нажатия кнопки "вперед",но она не работает)
7. Дмитрий Б. - 21 Сентября, 2006 - 10:05:50 - перейти к сообщению
Str
Пардон, не проверил скрипт во всех браузерах - думал, он настолько прост, что этого не потребуется. Я ошибался... Ну не везёт мне с Оперой - одним словом, любит она меня! Снова и снова...
Межбраузерный код выглядит вот так:
З. Ы. Если будете читать - не удивляйтесь: hasSrc нужен, чтобы в Opera 7.23 работало...
Пардон, не проверил скрипт во всех браузерах - думал, он настолько прост, что этого не потребуется. Я ошибался... Ну не везёт мне с Оперой - одним словом, любит она меня! Снова и снова...
Межбраузерный код выглядит вот так:
CODE:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
<title>Фотогалерея</title>
<script type="text/javascript">
<!--
var filesNames=
[
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg'
];
var path='images/';
var current=0, activeImages=3, imagesShift=2;
var preloadedImages;
function main()
{
var i;
preloadedImages=new Array(filesNames.length);
for (i=0; i<filesNames.length; i++)
preloadedImages[i]=new Image();
preloadCurrent();
show();
setTimeout(preload, 1000);
}
function hasSrc(image)
{
return image.src&&(image.src.lastIndexOf('.')>image.src.lastIndexOf('/'));
}
function preloadCurrent()
{
var i, src;
for (i=current; i<current+activeImages; i++)
if (!hasSrc(preloadedImages[i%preloadedImages.length]))
preloadedImages[i%preloadedImages.length].src=path+filesNames[i%preloadedImages.length];
}
function preload()
{
var i, currentLoads=0;
for (i=0; i<preloadedImages.length; i++)
if (hasSrc(preloadedImages[i])&&(!preloadedImages[i].complete))
currentLoads++;
for (i=current+activeImages; (currentLoads<activeImages)&&(i<preloadedImages.length); i++)
if (!hasSrc(preloadedImages[i]))
{
preloadedImages[i].src=path+filesNames[i];
currentLoads++;
}
for (i=0; (currentLoads<activeImages)&&(i<current); i++)
if (!hasSrc(preloadedImages[i]))
{
preloadedImages[i].src=path+filesNames[i];
currentLoads++;
}
for (i=0; i<preloadedImages.length; i++)
if (!hasSrc(preloadedImages[i]))
return setTimeout(preload, 1000);
}
function back()
{
current-=imagesShift;
while (current<0)
current+=filesNames.length;
preloadCurrent();
show();
}
function forward()
{
current+=imagesShift;
while (current>=filesNames.length)
current-=filesNames.length;
preloadCurrent();
show();
}
function show()
{
var i, a;
for (i=current; (i-current)<activeImages; i++)
{
if (a=document.getElementById('image'+(i-current+1)))
a.src=preloadedImages[i%preloadedImages.length].src;
else
window.status='Ошибка при задании тегов <img>...';
}
}
//-->
</script>
</head>
<body onload="main();">
<table width="400" align="center">
<tr>
<td width="33%">
<img src="images/image1.jpg" id="image1">
</td>
<td width="33%">
<img src="images/image2.jpg" id="image2">
</td>
<td width="33%">
<img src="images/image3.jpg" id="image3">
</td>
</tr>
</table>
<input type="button" value="Назад" onclick="back();">
<input type="button" value="Вперёд" onclick="forward();">
</body>
</html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
<title>Фотогалерея</title>
<script type="text/javascript">
<!--
var filesNames=
[
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg'
];
var path='images/';
var current=0, activeImages=3, imagesShift=2;
var preloadedImages;
function main()
{
var i;
preloadedImages=new Array(filesNames.length);
for (i=0; i<filesNames.length; i++)
preloadedImages[i]=new Image();
preloadCurrent();
show();
setTimeout(preload, 1000);
}
function hasSrc(image)
{
return image.src&&(image.src.lastIndexOf('.')>image.src.lastIndexOf('/'));
}
function preloadCurrent()
{
var i, src;
for (i=current; i<current+activeImages; i++)
if (!hasSrc(preloadedImages[i%preloadedImages.length]))
preloadedImages[i%preloadedImages.length].src=path+filesNames[i%preloadedImages.length];
}
function preload()
{
var i, currentLoads=0;
for (i=0; i<preloadedImages.length; i++)
if (hasSrc(preloadedImages[i])&&(!preloadedImages[i].complete))
currentLoads++;
for (i=current+activeImages; (currentLoads<activeImages)&&(i<preloadedImages.length); i++)
if (!hasSrc(preloadedImages[i]))
{
preloadedImages[i].src=path+filesNames[i];
currentLoads++;
}
for (i=0; (currentLoads<activeImages)&&(i<current); i++)
if (!hasSrc(preloadedImages[i]))
{
preloadedImages[i].src=path+filesNames[i];
currentLoads++;
}
for (i=0; i<preloadedImages.length; i++)
if (!hasSrc(preloadedImages[i]))
return setTimeout(preload, 1000);
}
function back()
{
current-=imagesShift;
while (current<0)
current+=filesNames.length;
preloadCurrent();
show();
}
function forward()
{
current+=imagesShift;
while (current>=filesNames.length)
current-=filesNames.length;
preloadCurrent();
show();
}
function show()
{
var i, a;
for (i=current; (i-current)<activeImages; i++)
{
if (a=document.getElementById('image'+(i-current+1)))
a.src=preloadedImages[i%preloadedImages.length].src;
else
window.status='Ошибка при задании тегов <img>...';
}
}
//-->
</script>
</head>
<body onload="main();">
<table width="400" align="center">
<tr>
<td width="33%">
<img src="images/image1.jpg" id="image1">
</td>
<td width="33%">
<img src="images/image2.jpg" id="image2">
</td>
<td width="33%">
<img src="images/image3.jpg" id="image3">
</td>
</tr>
</table>
<input type="button" value="Назад" onclick="back();">
<input type="button" value="Вперёд" onclick="forward();">
</body>
</html>
З. Ы. Если будете читать - не удивляйтесь: hasSrc нужен, чтобы в Opera 7.23 работало...
8. Str - 21 Сентября, 2006 - 12:24:42 - перейти к сообщению
Отлично, все работает 
. А можно сделать так, чтобы скрипт поддерживал несколько таких галлерей на одной странице?
. А можно сделать так, чтобы скрипт поддерживал несколько таких галлерей на одной странице?
9. Дмитрий Б. - 21 Сентября, 2006 - 21:52:20 - перейти к сообщению
Str
Элементарно!
Элементарно!
CODE:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
<title>Фотогалерея</title>
<script type="text/javascript">
<!--
var slideshows=
[
{
filesNames:
[
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg'
],
path: 'images/',
idPrefix: 'image',
current: 0,
activeImages: 3,
imagesShift: 2,
preloadedImages: null
},
{
filesNames:
[
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg'
],
path: 'slides/',
idPrefix: 'slide',
current: 0,
activeImages: 3,
imagesShift: 1,
preloadedImages: null
}
];
function main()
{
var i, n;
for (n=0; n<slideshows.length; n++)
with (slideshows[n])
{
preloadedImages=new Array(filesNames.length);
for (i=0; i<filesNames.length; i++)
preloadedImages[i]=new Image();
preloadCurrent(n);
show(n);
setTimeout('preload('+n+')', 1000);
}
}
function hasSrc(image)
{
return image.src&&(image.src.lastIndexOf('.')>image.src.lastIndexOf('/'));
}
function preloadCurrent(n)
{
with (slideshows[n])
{
var i, src;
for (i=current; i<current+activeImages; i++)
if (!hasSrc(preloadedImages[i%preloadedImages.length]))
preloadedImages[i%preloadedImages.length].src=path+filesNames[i%preloadedImages.length];
}
}
function preload(n)
{
with (slideshows[n])
{
var i, currentLoads=0;
for (i=0; i<preloadedImages.length; i++)
if (hasSrc(preloadedImages[i])&&(!preloadedImages[i].complete))
currentLoads++;
for (i=current+activeImages; (currentLoads<activeImages)&&(i<preloadedImages.length); i++)
if (!hasSrc(preloadedImages[i]))
{
preloadedImages[i].src=path+filesNames[i];
currentLoads++;
}
for (i=0; (currentLoads<activeImages)&&(i<current); i++)
if (!hasSrc(preloadedImages[i]))
{
preloadedImages[i].src=path+filesNames[i];
currentLoads++;
}
for (i=0; i<preloadedImages.length; i++)
if (!hasSrc(preloadedImages[i]))
return setTimeout('preload('+n+')', 1000);
}
}
function back(n)
{
with (slideshows[n])
{
current-=imagesShift;
while (current<0)
current+=filesNames.length;
preloadCurrent(n);
show(n);
}
}
function forward(n)
{
with (slideshows[n])
{
current+=imagesShift;
while (current>=filesNames.length)
current-=filesNames.length;
preloadCurrent(n);
show(n);
}
}
function show(n)
{
with (slideshows[n])
{
var i, a;
for (i=current; (i-current)<activeImages; i++)
{
if (a=document.getElementById(idPrefix+(i-current+1)))
a.src=preloadedImages[i%preloadedImages.length].src;
else
window.status='Ошибка при задании тегов <img>...';
}
}
}
//-->
</script>
</head>
<body onload="main();">
<table width="400" align="center">
<tr>
<td width="33%">
<img src="images/image1.jpg" id="image1">
</td>
<td width="33%">
<img src="images/image2.jpg" id="image2">
</td>
<td width="33%">
<img src="images/image3.jpg" id="image3">
</td>
</tr>
</table>
<input type="button" value="Назад" onclick="back(0);">
<input type="button" value="Вперёд" onclick="forward(0);">
<table width="400" align="center">
<tr>
<td width="33%">
<img src="images/image1.jpg" id="slide1">
</td>
<td width="33%">
<img src="images/image2.jpg" id="slide2">
</td>
<td width="33%">
<img src="images/image3.jpg" id="slide3">
</td>
</tr>
</table>
<input type="button" value="Назад" onclick="back(1);">
<input type="button" value="Вперёд" onclick="forward(1);">
</body>
</html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
<title>Фотогалерея</title>
<script type="text/javascript">
<!--
var slideshows=
[
{
filesNames:
[
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg'
],
path: 'images/',
idPrefix: 'image',
current: 0,
activeImages: 3,
imagesShift: 2,
preloadedImages: null
},
{
filesNames:
[
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg'
],
path: 'slides/',
idPrefix: 'slide',
current: 0,
activeImages: 3,
imagesShift: 1,
preloadedImages: null
}
];
function main()
{
var i, n;
for (n=0; n<slideshows.length; n++)
with (slideshows[n])
{
preloadedImages=new Array(filesNames.length);
for (i=0; i<filesNames.length; i++)
preloadedImages[i]=new Image();
preloadCurrent(n);
show(n);
setTimeout('preload('+n+')', 1000);
}
}
function hasSrc(image)
{
return image.src&&(image.src.lastIndexOf('.')>image.src.lastIndexOf('/'));
}
function preloadCurrent(n)
{
with (slideshows[n])
{
var i, src;
for (i=current; i<current+activeImages; i++)
if (!hasSrc(preloadedImages[i%preloadedImages.length]))
preloadedImages[i%preloadedImages.length].src=path+filesNames[i%preloadedImages.length];
}
}
function preload(n)
{
with (slideshows[n])
{
var i, currentLoads=0;
for (i=0; i<preloadedImages.length; i++)
if (hasSrc(preloadedImages[i])&&(!preloadedImages[i].complete))
currentLoads++;
for (i=current+activeImages; (currentLoads<activeImages)&&(i<preloadedImages.length); i++)
if (!hasSrc(preloadedImages[i]))
{
preloadedImages[i].src=path+filesNames[i];
currentLoads++;
}
for (i=0; (currentLoads<activeImages)&&(i<current); i++)
if (!hasSrc(preloadedImages[i]))
{
preloadedImages[i].src=path+filesNames[i];
currentLoads++;
}
for (i=0; i<preloadedImages.length; i++)
if (!hasSrc(preloadedImages[i]))
return setTimeout('preload('+n+')', 1000);
}
}
function back(n)
{
with (slideshows[n])
{
current-=imagesShift;
while (current<0)
current+=filesNames.length;
preloadCurrent(n);
show(n);
}
}
function forward(n)
{
with (slideshows[n])
{
current+=imagesShift;
while (current>=filesNames.length)
current-=filesNames.length;
preloadCurrent(n);
show(n);
}
}
function show(n)
{
with (slideshows[n])
{
var i, a;
for (i=current; (i-current)<activeImages; i++)
{
if (a=document.getElementById(idPrefix+(i-current+1)))
a.src=preloadedImages[i%preloadedImages.length].src;
else
window.status='Ошибка при задании тегов <img>...';
}
}
}
//-->
</script>
</head>
<body onload="main();">
<table width="400" align="center">
<tr>
<td width="33%">
<img src="images/image1.jpg" id="image1">
</td>
<td width="33%">
<img src="images/image2.jpg" id="image2">
</td>
<td width="33%">
<img src="images/image3.jpg" id="image3">
</td>
</tr>
</table>
<input type="button" value="Назад" onclick="back(0);">
<input type="button" value="Вперёд" onclick="forward(0);">
<table width="400" align="center">
<tr>
<td width="33%">
<img src="images/image1.jpg" id="slide1">
</td>
<td width="33%">
<img src="images/image2.jpg" id="slide2">
</td>
<td width="33%">
<img src="images/image3.jpg" id="slide3">
</td>
</tr>
</table>
<input type="button" value="Назад" onclick="back(1);">
<input type="button" value="Вперёд" onclick="forward(1);">
</body>
</html>
10. Str - 22 Сентября, 2006 - 03:34:22 - перейти к сообщению
Спасибо.