галерея на Javascript с использованием массива и превью, не могу понять что не так?
4 октября 2009, 16:44
Автор: magi
галерея на Javascript с использованием массива и превью, не могу понять что не так?
проблема с ним такая что картинки в браузере выводятся в виде кавадратов с красным крестом внутри(вообщем не отображаются). Сразу надо сказать что путь написан првавельно и названия и расширения картинок тоже :(
вот сам скрипт
эта часть находится в head
а эта часть в слое
Задача скрипта была в том что бы он выводил на экран одну большую картинку, под ней несколько превью , которые листаются и при нажатии на них на месте большой открывается та на которую нажали, а при клике на большую можно открыть ее в настоящем размере.
проблема с ним такая что картинки в браузере выводятся в виде кавадратов с красным крестом внутри(вообщем не отображаются). Сразу надо сказать что путь написан првавельно и названия и расширения картинок тоже :(
вот сам скрипт
эта часть находится в head
<SCRIPT TYPE="text/javascript">
//var imageHolderObject;
var imageHolderObject1;
var imageHolderObject2;
var imageHolderObject3;
var imageHolderObject4;
var imageHolderObject5;
var imageHolderObject6;
var imageHolderObject7;
var imageHolderObject8;
var imageHolderObject9;
var imageHolderObject10;
var imageHolderObject11;
var imageHolderBigObject;
var firstObject;
var previousObject;
var nextObject;
var lastObject;
var imageIndex;
var images = new Array ();
var images_m = new Array ();
//списко картинок (цифр)
images[0] = "./img/Bal1small.gif";
images[1] = "./img/Bal2small.gif";
images[2] = "./img/Bal3small.gif";
images[3] = "./img/Bal4small.gif";
images[4] = "./img/Bal5small.gif";
images[5] = "./img/Bal6small.gif";
images[6] = "./img/Bal7small.gif";
images[7] = "./img/Bal8small.gif";
images[8] = "./img/Bal9small.gif";
images[9] = "./img/Bal10small.gif";
images[10] = "./img/Bal11small.gif";
//список картинок средних
images_m[0] = "./img/Bal1.gif";
images_m[1] = "./img/Bal2.gif";
images_m[2] = "./img/Bal3.gif";
images_m[3] = "./img/Bal4.gif";
images_m[4] = "./img/Bal5.gif";
images_m[5] = "./img/Bal6.gif";
images_m[6] = "./img/Bal7.gif";
images_m[7] = "./img/Bal8.gif";
images_m[8] = "./img/Bal9.gif";
images_m[9] = "./img/Bal10.gif";
images_m[10] = "./img/Bal11.gif";
// Объявляем набор экземпляров объектов, соответствующих "пустому" :Я
// изображению и гилерссылкам. Они пригодятся объявленным ранее '9
// функциям
// Сразу после загрузки страницы выводим первое изображение
//в списке слайд-шоу
// Объявляем переменную, хранящую номер изображения, выведенного //в данный момент на экран var imagelndex = 0;
// Объявляем функции, выполняющие переключение между изображениями
function goToFirst()
{
imageIndex = 0;
showImageAndLinks();
}
function goToPrevious()
{
if (imageIndex > 0) imageIndex--;
showImageAndLinks();
}
function goToNext()
{
if (imageIndex < images.length) imageIndex++;
showImageAndLinks();
}
function goToLast()
{
imageIndex = images.length - 6;
showImageAndLinks();
}
// Объявляем функцию, выводящую изображение на экран и скрывающую 1
// ненужные в данный момент гиперссылки и
function showImageAndLinks()
{
imageHolderObject1.src = images[imageIndex];
imageHolderObject2.src = images[imageIndex+1];
imageHolderObject3.src = images[imageIndex+2];
imageHolderObject4.src = images[imageIndex+3];
imageHolderObject5.src = images[imageIndex+4];
imageHolderObject6.src = images[imageIndex+5];
imageHolderObject7.src = images[imageIndex+6];
imageHolderObject8.src = images[imageIndex+7];
imageHolderObject9.src = images[imageIndex+8];
imageHolderObject10.src = images[imageIndex+9];
imageHolderObject11.src = images[imageIndex+10];
//alert(images_m[imageIndex]);
imageHolderBigObgect.src=images_m[imageIndex];
firstObject.style.visibility = (imageIndex == 0) ? "hidden" : "visible";
previousObject.style.visibility = firstObject.style.visibility;
//images.length - 6- так как отображаем 6 картинок за 1 раз
nextObject.style.visibility = (imageIndex == images.length - 6) ? "hidden" : "visible";
lastObject.style.visibility = nextObject.style.visibility;
}
function showBig(obj)
{
//alert(obj.src);
imageHolderBig.src = obj.src.replace("small.gif",".gif");
}
function openwin(obj) //Щелчок мышкой на картинке
{
//Для работы скрипта в одной папке должны располагаться маленькие и большие картинки
//большие картинки должны в конце названия содержать последовательность "big".
//При вызове функции указать ширину и высоту картинки
//Пока для всех картинок устанавливается одинаковая ширина и высота
//если файлы формата jpg, поменяйте gif на jpg
name_img=obj.src.replace(".gif","big.gif"); //определяем имя файла с большой картинкой
//объявление вспомогатедьных переменных
var w_img=null;
var w,h;
var hh,t,l;
var aaa,bbb;
//определяем ширину и высоту выводимых данных
//(картинка, поля, текст)
//распологаем по центру экрана:
size_w=1024;
size_h=768;
w=screen.width;
h=screen.height;
ww=size_w;
hh=size_h;
t=(h-hh)/2; //отступ сверху
l=(w-ww)/2; //отступ слева
var win_i;
if (!win_i || win_i.closed)
{
win_i=window.open("", "win_im", "width="+ww+", height="+hh+", left="+l+", top="+t+",menubar=no");
}
else
{
win_i.close();
win_i=window.open("", "win_im", "width="+ww+", height="+hh+", left="+l+", top="+t+",menubar=no");
}
setTimeout("",50);
win_i.document.write("<html><head><title>Картинка</title></head><body style='background: #FFF; margin:0; padding:0;'>");
win_i.document.write("<img src="+name_img+" width="+size_w+" height="+size_h+" border=0 style='cursor:pointer' onclick='window.close();'></div>");
win_i.document.write("</body></html>");
win_i.focus();
win_i.document.close();
return 1;
}
function Init()
{
//Создаем массив с интернет-адресами всех изображений, входящих
//в слайд-шоу
imageHolderObject1 = document.all["imageHolder1"];
imageHolderObject2 = document.all["imageHolder2"];
imageHolderObject3 = document.all["imageHolder3"];
imageHolderObject4 = document.all["imageHolder4"];
imageHolderObject5 = document.all["imageHolder5"];
imageHolderObject6 = document.all["imageHolder6"];
imageHolderBigObgect= document.all["imageHolderBig"];
firstObject = document.all["first"];
previousObject = document.all["previous"];
nextObject = document.all["next"];
lastObject = document.all["last"];
goToFirst();
//задаем начальную картинку для большого варианта:
imageHolderBig.src = imageHolderObject1.src.replace("small.gif",".gif");
}
</SCRIPT>
//var imageHolderObject;
var imageHolderObject1;
var imageHolderObject2;
var imageHolderObject3;
var imageHolderObject4;
var imageHolderObject5;
var imageHolderObject6;
var imageHolderObject7;
var imageHolderObject8;
var imageHolderObject9;
var imageHolderObject10;
var imageHolderObject11;
var imageHolderBigObject;
var firstObject;
var previousObject;
var nextObject;
var lastObject;
var imageIndex;
var images = new Array ();
var images_m = new Array ();
//списко картинок (цифр)
images[0] = "./img/Bal1small.gif";
images[1] = "./img/Bal2small.gif";
images[2] = "./img/Bal3small.gif";
images[3] = "./img/Bal4small.gif";
images[4] = "./img/Bal5small.gif";
images[5] = "./img/Bal6small.gif";
images[6] = "./img/Bal7small.gif";
images[7] = "./img/Bal8small.gif";
images[8] = "./img/Bal9small.gif";
images[9] = "./img/Bal10small.gif";
images[10] = "./img/Bal11small.gif";
//список картинок средних
images_m[0] = "./img/Bal1.gif";
images_m[1] = "./img/Bal2.gif";
images_m[2] = "./img/Bal3.gif";
images_m[3] = "./img/Bal4.gif";
images_m[4] = "./img/Bal5.gif";
images_m[5] = "./img/Bal6.gif";
images_m[6] = "./img/Bal7.gif";
images_m[7] = "./img/Bal8.gif";
images_m[8] = "./img/Bal9.gif";
images_m[9] = "./img/Bal10.gif";
images_m[10] = "./img/Bal11.gif";
// Объявляем набор экземпляров объектов, соответствующих "пустому" :Я
// изображению и гилерссылкам. Они пригодятся объявленным ранее '9
// функциям
// Сразу после загрузки страницы выводим первое изображение
//в списке слайд-шоу
// Объявляем переменную, хранящую номер изображения, выведенного //в данный момент на экран var imagelndex = 0;
// Объявляем функции, выполняющие переключение между изображениями
function goToFirst()
{
imageIndex = 0;
showImageAndLinks();
}
function goToPrevious()
{
if (imageIndex > 0) imageIndex--;
showImageAndLinks();
}
function goToNext()
{
if (imageIndex < images.length) imageIndex++;
showImageAndLinks();
}
function goToLast()
{
imageIndex = images.length - 6;
showImageAndLinks();
}
// Объявляем функцию, выводящую изображение на экран и скрывающую 1
// ненужные в данный момент гиперссылки и
function showImageAndLinks()
{
imageHolderObject1.src = images[imageIndex];
imageHolderObject2.src = images[imageIndex+1];
imageHolderObject3.src = images[imageIndex+2];
imageHolderObject4.src = images[imageIndex+3];
imageHolderObject5.src = images[imageIndex+4];
imageHolderObject6.src = images[imageIndex+5];
imageHolderObject7.src = images[imageIndex+6];
imageHolderObject8.src = images[imageIndex+7];
imageHolderObject9.src = images[imageIndex+8];
imageHolderObject10.src = images[imageIndex+9];
imageHolderObject11.src = images[imageIndex+10];
//alert(images_m[imageIndex]);
imageHolderBigObgect.src=images_m[imageIndex];
firstObject.style.visibility = (imageIndex == 0) ? "hidden" : "visible";
previousObject.style.visibility = firstObject.style.visibility;
//images.length - 6- так как отображаем 6 картинок за 1 раз
nextObject.style.visibility = (imageIndex == images.length - 6) ? "hidden" : "visible";
lastObject.style.visibility = nextObject.style.visibility;
}
function showBig(obj)
{
//alert(obj.src);
imageHolderBig.src = obj.src.replace("small.gif",".gif");
}
function openwin(obj) //Щелчок мышкой на картинке
{
//Для работы скрипта в одной папке должны располагаться маленькие и большие картинки
//большие картинки должны в конце названия содержать последовательность "big".
//При вызове функции указать ширину и высоту картинки
//Пока для всех картинок устанавливается одинаковая ширина и высота
//если файлы формата jpg, поменяйте gif на jpg
name_img=obj.src.replace(".gif","big.gif"); //определяем имя файла с большой картинкой
//объявление вспомогатедьных переменных
var w_img=null;
var w,h;
var hh,t,l;
var aaa,bbb;
//определяем ширину и высоту выводимых данных
//(картинка, поля, текст)
//распологаем по центру экрана:
size_w=1024;
size_h=768;
w=screen.width;
h=screen.height;
ww=size_w;
hh=size_h;
t=(h-hh)/2; //отступ сверху
l=(w-ww)/2; //отступ слева
var win_i;
if (!win_i || win_i.closed)
{
win_i=window.open("", "win_im", "width="+ww+", height="+hh+", left="+l+", top="+t+",menubar=no");
}
else
{
win_i.close();
win_i=window.open("", "win_im", "width="+ww+", height="+hh+", left="+l+", top="+t+",menubar=no");
}
setTimeout("",50);
win_i.document.write("<html><head><title>Картинка</title></head><body style='background: #FFF; margin:0; padding:0;'>");
win_i.document.write("<img src="+name_img+" width="+size_w+" height="+size_h+" border=0 style='cursor:pointer' onclick='window.close();'></div>");
win_i.document.write("</body></html>");
win_i.focus();
win_i.document.close();
return 1;
}
function Init()
{
//Создаем массив с интернет-адресами всех изображений, входящих
//в слайд-шоу
imageHolderObject1 = document.all["imageHolder1"];
imageHolderObject2 = document.all["imageHolder2"];
imageHolderObject3 = document.all["imageHolder3"];
imageHolderObject4 = document.all["imageHolder4"];
imageHolderObject5 = document.all["imageHolder5"];
imageHolderObject6 = document.all["imageHolder6"];
imageHolderBigObgect= document.all["imageHolderBig"];
firstObject = document.all["first"];
previousObject = document.all["previous"];
nextObject = document.all["next"];
lastObject = document.all["last"];
goToFirst();
//задаем начальную картинку для большого варианта:
imageHolderBig.src = imageHolderObject1.src.replace("small.gif",".gif");
}
</SCRIPT>
а эта часть в слое
<div id="Layer51">
<div id=gallery>
<IMG ID="imageHolderBig" SRC="" onClick="openwin(this);">
<P>
<!-- "Место для "пустых" изображений -->
<A ID="first" HREF="#" ONCLICK="goToFirst();"><<</A>
<A ID="previous" HREF="#" ONCLICK="goToPrevious();"><</A> <img id="imageHolder1" src="" onclick="showBig(this);" />
<IMG ID="imageHolder2" SRC="" onClick="showBig(this);">
<IMG ID="imageHolder3" SRC="" onClick="showBig(this);">
<IMG ID="imageHolder4" SRC="" onClick="showBig(this);">
<IMG ID="imageHolder5" SRC="" onClick="showBig(this);">
<IMG ID="imageHolder6" SRC="" onClick="showBig(this);"><A ID="next" HREF="#" ONCLICK="goToNext();">></A>
<A ID="last" HREF="#" ONCLICK="goToLast();">>></A></P>
</div>
<!-- ОКОНЧАНИЕ --></div>
<div id=gallery>
<IMG ID="imageHolderBig" SRC="" onClick="openwin(this);">
<P>
<!-- "Место для "пустых" изображений -->
<A ID="first" HREF="#" ONCLICK="goToFirst();"><<</A>
<A ID="previous" HREF="#" ONCLICK="goToPrevious();"><</A> <img id="imageHolder1" src="" onclick="showBig(this);" />
<IMG ID="imageHolder2" SRC="" onClick="showBig(this);">
<IMG ID="imageHolder3" SRC="" onClick="showBig(this);">
<IMG ID="imageHolder4" SRC="" onClick="showBig(this);">
<IMG ID="imageHolder5" SRC="" onClick="showBig(this);">
<IMG ID="imageHolder6" SRC="" onClick="showBig(this);"><A ID="next" HREF="#" ONCLICK="goToNext();">></A>
<A ID="last" HREF="#" ONCLICK="goToLast();">>></A></P>
</div>
<!-- ОКОНЧАНИЕ --></div>
Задача скрипта была в том что бы он выводил на экран одну большую картинку, под ней несколько превью , которые листаются и при нажатии на них на месте большой открывается та на которую нажали, а при клике на большую можно открыть ее в настоящем размере.