webew
Войти » Регистрация
 
JavaScript

галерея на Javascript с использованием массива и превью, не могу понять что не так?

4 октября 2009, 16:44
Автор: magi
галерея на Javascript с использованием массива и превью, не могу понять что не так?
проблема с ним такая что картинки в браузере выводятся в виде кавадратов с красным крестом внутри(вообщем не отображаются). Сразу надо сказать что путь написан првавельно и названия и расширения картинок тоже :(
вот сам скрипт
эта часть находится в 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>


а эта часть в слое

<div id="Layer51">
  <div id=gallery>
<IMG ID="imageHolderBig" SRC="" onClick="openwin(this);">
<P>
<!-- "Место для "пустых" изображений -->
<A ID="first" HREF="#" ONCLICK="goToFirst();">&lt;&lt;</A>&nbsp;
<A ID="previous" HREF="#" ONCLICK="goToPrevious();">&lt;</A>&nbsp;<img id="imageHolder1" src="" onclick="showBig(this);" />&nbsp;
<IMG ID="imageHolder2" SRC="" onClick="showBig(this);">&nbsp;
<IMG ID="imageHolder3" SRC="" onClick="showBig(this);">&nbsp;
<IMG ID="imageHolder4" SRC="" onClick="showBig(this);">&nbsp;
<IMG ID="imageHolder5" SRC="" onClick="showBig(this);">&nbsp;
<IMG ID="imageHolder6" SRC="" onClick="showBig(this);"><A ID="next" HREF="#" ONCLICK="goToNext();">&gt;</A>&nbsp;
<A ID="last" HREF="#" ONCLICK="goToLast();">&gt;&gt;</A></P>
</div>
<!-- ОКОНЧАНИЕ --></div>


Задача скрипта была в том что бы он выводил на экран одну большую картинку, под ней несколько превью , которые листаются и при нажатии на них на месте большой открывается та на которую нажали, а при клике на большую можно открыть ее в настоящем размере.
Добавить комментарий
Отображение комментариев: Древовидное | Плоское

bur

1) Открываете браузер Mozilla Firefox.
2) Открываем в нем Firebug (если нет этого аддона - ставим).
3) В фаербаге смотрим адреса картинок (опция HTML) и понимаем что не так с путями.
Если не помогает - дайте ссылку на страницу в вебе, т.к. этот код удобнее рассматривать в совокупности с картинками.
05.10.2009, 11:22
Ответить
NO USERPIC

magi

попробую с мазилой. но тоже самое пробовала с оперой и эксплорером (там код смотрела уже получаемый браузером) - с путем все так же как и в скрипте :( , в сети сайта пока что нет, на апаче выкладывали на компе, таже проблема, не видит .
07.10.2009, 14:12
Ответить

bur

magi
попробую с мазилой

Попробуйте.
07.10.2009, 19:25
Ответить
NO USERPIC

magi

штуковина хорошая к мазиле подключается, но она так же видит ссылки, как они написаны в скрипте. а можно куда -нибуть выложить что бы вы посмотрели эту страничку, на ftp какой-нибуть (narod).
самое противное то что в сайте не одна такая страница, а проблема одна и таже.
08.10.2009, 18:56
Ответить

bur

Выкладывайте хотя бы на народ, посмотрим что там у вас.
09.10.2009, 11:10
Ответить
NO USERPIC

magi

http://narod.ru/disk/14012018000/page.rar.html
оно там
10.10.2009, 23:13
Ответить

bur

1) Если бы вы не поленились поставить фаербаг, то сами бы увидели, что адреса картинок не неправильные, а их просто нет. Вот такой код я увидел:
<p><a onclick="goToFirst();" href="#" id="first"><<</a> 
<a onclick="goToPrevious();" href="#" id="previous"><</a> 
<img onclick="showBig(this);" src="" id="imageHolder1"/> 
<img onclick="showBig(this);" src="" id="imageHolder2"/> 
<img onclick="showBig(this);" src="" id="imageHolder3"/> 
<img onclick="showBig(this);" src="" id="imageHolder4"/> 
<img onclick="showBig(this);" src="" id="imageHolder5"/> 
<img onclick="showBig(this);" src="" id="imageHolder6"/><a onclick="goToNext();" href="#" id="next">></a> 
<a onclick="goToLast();" href="#" id="last">>></a></p>

2) Галерея не работает, потому что нигде не вызывается функция Init(), объявление которой есть в коде. Если сделать вызов в body.onload, то картинки появятся.
3) Код будет работать только в ИЕ и то с ошибками, т.к. он очень кривой. Лечить его смысла нет.
--------------
4) Если вам необходимо хорошее работающее решение воспользуйтесь этой каруселью.
12.10.2009, 11:45
Ответить
NO USERPIC

magi

спасибо! буду дальше его ковырять, а фаербаг у меня стоит, нас не учили им пользоваться поэтому что смогла то и натыкала в нем...
а карусель не подойдет, тут именно большое изображения надо что бы было на экране, на нем вся страница завязана, да и по клику пользователь должен получить исходное изображение, большого размера ...проблема то научится script писать , а не галерею делать...галерею я и другими методами типо flash могу сделать.
12.10.2009, 21:58
Ответить

1234ru

Можно здесь в виде файла выложить
http://webew.ru/upload.webew
То, что не убивает нас, делает нас инвалидами.
09.10.2009, 23:33
Ответить
NO USERPIC

magi

эту штуку я тоже заметила, оно 14 метров весит :( не влезает :)
10.10.2009, 23:15
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100