Ошибка в чтении кода

AngelsPrayer · 4 ноя 2012

Доброго времени суток!
Я - новичок к области строения сайтов и потому очень нуждаюсь в помощи людей более опытных и знающих.
Итак, к сути вопроса:

Имеется вот такая простенькая галерея на JavaScript

Код (Text):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>JavaScript Slideshow - TinySlideshow</title>

<link rel="stylesheet" href="gallery_styles.css" />

</head>

<body>

<ul id="slideshow">

<li>

<h3></h3>

<span>photos/loft1.jpg</span>

<p></p>

<img src="thumbnails/loft1.jpg" alt="" />

</li>

<li>

<h3></h3>

<span>photos/loft2.jpg</span>

<p></p>

<img src="thumbnails/loft2.jpg" alt="" />

</li>

<li>

<h3></h3>

<span>photos/loft3.jpg</span>

<p></p>

<img src="thumbnails/loft3.jpg" alt="" />

</li>

<li>

<h3></h3>

<span>photos/loft4.jpg</span>

<p></p>

<img src="thumbnails/loft4.jpg" alt="" />

</li>

<li>

<h3></h3>

<span>photos/loft5.jpg</span>

<p></p>

<img src="thumbnails/loft5.jpg" alt="" />

</li>

<li>

<h3></h3>

<span>photos/loft6.jpg</span>

<p></p>

<img src="thumbnails/loft6.jpg" alt="" />

</li>

</ul>

<div id="wrapper">

<div id="fullsize">

<div id="imgprev" class="imgnav" title="Previous Image"></div>

<div id="imglink"></div>

<div id="imgnext" class="imgnav" title="Next Image"></div>

<div id="image"></div>

<div id="information">

<h3></h3>

<p></p>

</div>

</div>

<div id="thumbnails">

<div id="slideleft" title="Slide Left"></div>

<div id="slidearea">

<div id="slider"></div>

</div>

<div id="slideright" title="Slide Right"></div>

</div>

</div>

<script type="text/javascript" src="gallery_script.js"></script>

<script type="text/javascript">

//$('slideshow').style.display='block';

$('wrapper').style.display='block';

var slideshow=new TINY.slideshow("slideshow");

window.onload=function(){

slideshow.auto=true;

slideshow.speed=5;

slideshow.link="linkhover";

slideshow.info="information";

slideshow.thumbs="slider";

slideshow.left="slideleft";

slideshow.right="slideright";

slideshow.scrollSpeed=4;

slideshow.spacing=5;

slideshow.active="#FD7600";

slideshow.init("slideshow","image","imgprev","imgnext","imglink");

}

</script>

</body>

</html>

Как отдельный код она работает замечательно. Но когда я пытаюсь вставить ее в сайт, выпадает табличка с ошибкой "Unable to set value of the property 'display': object is null or undefined"
Почему такое может быть и как с этим бороться?
Заранее благодарна за помощь.

P.S. Следующим вопросом будет: как привязать эту самую галерею к базе данных, но это, наверное, не в этом разделе форума...

smitt · 4 ноя 2012

Мне в этом коде не нравится эта строчка

AngelsPrayer сказал(а):

$('wrapper').style.display='block';
Нажмите, чтобы раскрыть...

Обычно указывают '#wrapper'

AngelsPrayer · 4 ноя 2012

Я попробовала добавить #
Ошибка остается та же...
То есть, если запустить этот код как есть, не "переселяя" его на страницу сайта (то есть, оставить независимым файлом), то он прекрасно работает.

igordata · 5 ноя 2012

jQuery надо подключить ещё

Your · 5 ноя 2012

Вам стоит открыть документацию...
С чего вы решили что он должен так работать?

$('#wrapper') вы понимаете, что-это значит?

$().

$('#wrapper').css('display','block');
$('#wrapper').addClass('display');

Это вам не this.style.display='block';

И не document.getElementById('wrapper').style.display='block';

$(document.getElementById('wrapper')).function();

Тогда так:
$('#wrapper')[0].style.display='block';
$('#wrapper').get(0).style.display='block';

А вообще почему бы и не:

$('#wrapper').show();
$('#wrapper').hide();

И где вы подключили библиотеку jquery?

AngelsPrayer · 5 ноя 2012

Ой, ой, ой! Очень много кода для новичка!
Насколько я понимаю, эта галерея использует скрипты JavaScript, а не библиотеку jQuery.

Пожалуй, так будет проще:
1. В первом топике - сам код галереи (собственно, файл index.html).

2. Это - стили (файл gallery_styles.css)

Код (Text):

body{

margin:0;

background:#000000;

padding:5px;

font:11px Verdana,Arial;

}

#slideshow{

list-style:none;

color:#fff;

}

#slideshow span{

display:none;

}

#wrapper{

width:506px;

margin:50px auto;

display:none;

}

#wrapper *{

margin:0;

padding:0;

}

#fullsize{

position:relative;

width:500px;

height:300px;

padding:2px;

border:5px solid #ffffff;

background:#000;

}

#information{

position:absolute;

bottom:0;

width:500px;

height:0;

background:#000;

color:#fff;

overflow:hidden;

z-index:200;

opacity:.0;

filter:alpha(opacity=00);

}

#information h3{

padding:4px 8px 3px;

font-size:14px;

}

#information p{

padding:0 8px 8px;

}

#image{

width:500px;

}

#image img{

position:absolute;

z-index:25;

width:auto;

}

.imgnav{

position:absolute;

width:25%;

height:306px;

cursor:pointer;

z-index:150;

}

#imgprev{

left:0;

background:url(images/left.gif) left center no-repeat;

}

#imgnext{

right:0;

background:url(images/right.gif) right center no-repeat;

}

#imglink{

position:absolute;

height:306px;

width:100%;

z-index:100;

opacity:.4;

filter:alpha(opacity=40);

}

.linkhover{

background:url(images/link.gif) center center no-repeat;

}

#thumbnails{

width:516px;

margin-top:15px;

}

#slideleft{

float:left;

width:30px;

height:30px;

margin-top:25px;

background:url(images/arr_left.png) center center no-repeat;

}

#slideleft:hover{

background:url(images/arr_left_s.png) center center no-repeat;

}

#slideright{

float:right;

width:30px;

height:30px;

margin-top:25px;

background: url(images/arr_right.png) center center no-repeat;

}

#slideright:hover{

background:url(images/arr_right_s.png) center center no-repeat;

}

#slidearea{

float:left;

position:relative;

width:447px;

margin-left:5px;

height:83px;

overflow:hidden;

}

#slider{

position:absolute;

left:0;

height:83px;

}

#slider img{

cursor:pointer;

border:2px solid #ffffff;

padding:2px;

}

3. Это - код JavaScript (файл gallery_script.js)

Код (Text):

var TINY={};

function $(i){return document.getElementById(i)}

function $$(e,p){p=p||document; return p.getElementsByTagName(e)}

TINY.slideshow=function(n){

this.infoSpeed=this.imgSpeed=this.speed=10;

this.thumbOpacity=this.navHover=70;

this.navOpacity=25;

this.scrollSpeed=5;

this.letterbox='#000';

this.n=n;

this.c=0;

this.a=[]

};

TINY.slideshow.prototype={

init:function(s,z,b,f,q){

s=$(s);

var m=$$('li',s), i=0, w=0;

this.l=m.length;

this.q=$(q);

this.f=$(z);

this.r=$(this.info);

this.o=parseInt(TINY.style.val(z,'width'));

if(this.thumbs){

var u=$(this.left), r=$(this.right);

u.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');

u.onmouseout=r.onmouseout=new Function('TINY.scroll.cl("'+this.thumbs+'")');

r.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');

this.p=$(this.thumbs)

}

for(i;i<this.l;i++){

this.a[i]={};

var h=m[i], a=this.a[i];

a.t=$$('h3',h)[0].innerHTML;

a.d=$$('p',h)[0].innerHTML;

a.l=$$('a',h)[0]?$$('a',h)[0].href:'';

a.p=$$('span',h)[0].innerHTML;

if(this.thumbs){

var g=$$('img',h)[0];

this.p.appendChild(g);

w+=parseInt(g.offsetWidth);

if(i!=this.l-1){

g.style.marginRight=this.spacing+'px';

w+=this.spacing

}

this.p.style.width=w+'px';

g.style.opacity=this.thumbOpacity/100;

g.style.filter='alpha(opacity='+this.thumbOpacity+')';

g.onmouseover=new Function('TINY.alpha.set(this,100,5)');

g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)');

g.onclick=new Function(this.n+'.pr('+i+',1)')

}

}

if(b&&f){

b=$(b);

f=$(f);

b.style.opacity=f.style.opacity=this.navOpacity/100;

b.style.filter=f.style.filter='alpha(opacity='+this.navOpacity+')';

b.onmouseover=f.onmouseover=new Function('TINY.alpha.set(this,'+this.navHover+',5)');

b.onmouseout=f.onmouseout=new Function('TINY.alpha.set(this,'+this.navOpacity+',5)');

b.onclick=new Function(this.n+'.mv(-1,1)');

f.onclick=new Function(this.n+'.mv(1,1)')

}

this.auto?this.is(0,0):this.is(0,1)

},

mv:function(d,c){

var t=this.c+d;

this.c=t=t<0?this.l-1:t>this.l-1?0:t;

this.pr(t,c)

},

pr:function(t,c){

clearTimeout(this.lt);

if(c){

clearTimeout(this.at)

}

this.c=t;

this.is(t,c)

},

is:function(s,c){

if(this.info){

TINY.height.set(this.r,1,this.infoSpeed/2,-1)

}

var i=new Image();

i.style.opacity=0;

i.style.filter='alpha(opacity=0)';

this.i=i;

i.onload=new Function(this.n+'.le('+s+','+c+')');

i.src=this.a[s].p;

if(this.thumbs){

var a=$$('img',this.p), l=a.length, x=0;

for(x;x<l;x++){

a[x].style.borderColor=x!=s?'':this.active

}

}

},

le:function(s,c){

this.f.appendChild(this.i);

var w=this.o-parseInt(this.i.offsetWidth);

if(w>0){

var l=Math.floor(w/2);

this.i.style.borderLeft=l+'px solid '+this.letterbox;

this.i.style.borderRight=(w-l)+'px solid '+this.letterbox

}

TINY.alpha.set(this.i,100,this.imgSpeed);

var n=new Function(this.n+'.nf('+s+')');

this.lt=setTimeout(n,this.imgSpeed*100);

if(!c){

this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000)

}

if(this.a[s].l!=''){

this.q.onclick=new Function('window.location="'+this.a[s].l+'"');

this.q.onmouseover=new Function('this.className="'+this.link+'"');

this.q.onmouseout=new Function('this.className=""');

this.q.style.cursor='pointer'

}else{

this.q.onclick=this.q.onmouseover=null;

this.q.style.cursor='default'

}

var m=$$('img',this.f);

if(m.length>2){

this.f.removeChild(m[0])

}

},

nf:function(s){

if(this.info){

s=this.a[s];

$$('h3',this.r)[0].innerHTML=s.t;

$$('p',this.r)[0].innerHTML=s.d;

this.r.style.height='auto';

var h=parseInt(this.r.offsetHeight);

this.r.style.height=0;

TINY.height.set(this.r,h,this.infoSpeed,0)

}

}

};

TINY.scroll=function(){

return{

init:function(e,d,s){

e=typeof e=='object'?e:$(e); var p=e.style.left||TINY.style.val(e,'left'); e.style.left=p;

var l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0; e.si=setInterval(function(){TINY.scroll.mv(e,l,d,s)},20)

},

mv:function(e,l,d,s){

var c=parseInt(e.style.left); if(c==l){TINY.scroll.cl(e)}else{var i=Math.abs(l+c); i=i<s?i:s; var n=c-i*d; e.style.left=n+'px'}

},

cl:function(e){e=typeof e=='object'?e:$(e); clearInterval(e.si)}

}

}();

TINY.height=function(){

return{

set:function(e,h,s,d){

e=typeof e=='object'?e:$(e); var oh=e.offsetHeight, ho=e.style.height||TINY.style.val(e,'height');

ho=oh-parseInt(ho); var hd=oh-ho>h?-1:1; clearInterval(e.si); e.si=setInterval(function(){TINY.height.tw(e,h,ho,hd,s)},20)

},

tw:function(e,h,ho,hd,s){

var oh=e.offsetHeight-ho;

if(oh==h){clearInterval(e.si)}else{if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}}

}

}

}();

TINY.alpha=function(){

return{

set:function(e,a,s){

e=typeof e=='object'?e:$(e); var o=e.style.opacity||TINY.style.val(e,'opacity'),

d=a>o*100?1:-1; e.style.opacity=o; clearInterval(e.ai); e.ai=setInterval(function(){TINY.alpha.tw(e,a,d,s)},20)

},

tw:function(e,a,d,s){

var o=Math.round(e.style.opacity*100);

if(o==a){clearInterval(e.ai)}else{var n=o+Math.ceil(Math.abs(a-o)/s)*d; e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'}

}

}

}();

TINY.style=function(){return{val:function(e,p){e=typeof e=='object'?e:$(e); return e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPropertyValue(p)}}}();

Если запустить индекс-файл, галерея будет работать. Никаких дополнительных файлов к ней не прилагается, только папки с самими изображениями.
Но, если я переписываю код из индекс-файла в страницу сайта (само собой, перенося .css и .js-файлы и картинки в папку сайта и прописав правильные пути к ним), то на сайте появляется сообщение об ошибке...
Извините, если я задаю глупые вопросы. Я действительно ньюб в этой области, а очень хочется, чтобы все получилось и работало как следует.

Your · 8 ноя 2012

А причем тут тогда jquery?

smitt · 9 ноя 2012

Проблема еще остается?
Я запустил твой код, у меня работает...

AngelsPrayer · 11 ноя 2012

smitt, код работает, как независимый HTML-документ, но выдает ошибку, когда я переписываю его в тело моего сайта.

Я решила бросить это неблагодарное дело (подгонять чужой код под себя), и сделала галерею сама. Ну, почти сама
Вот теперь возник новый вопрос по jQuery.
Какая функция jQuery мне нужна, чтобы переключаться между миниатюрами галереи с помощью стрелок "вперед" и "назад"?
Я смогла анимировать (функция .animate() ) полосу прокрутки изображений, а теперь мне нужно привязать сами изображения к стрелкам и к главной, большой картинке...

Код .js выглядит вот так:

Код (Text):

var x=1;

$(document).ready(function(){

$(".tmb_slider img").click(function(){

$("#pic").attr({"src":"gallery/big_thumbs/"+$(this).attr('ct')})

$(".tmb_slider img").css({

"border":"2px solid #FFFFFF"

})

$(this).css({

"border":"2px solid #FD7600"

})

})

function htmSlider(){

var slideWrap = jQuery('.tmb_slider');

var nextLink = jQuery('.right_arr');

var prevLink = jQuery('.left_arr');

var slideWidth = jQuery('.tumbnail').outerWidth();

var newLeftPos = slideWrap.position().left - slideWidth;

nextLink.click(function(){

if( nextLink.attr('name') == 'next' ) {

nextLink.removeAttr('name');

slideWrap.animate({left: newLeftPos}, 500, function(){

slideWrap

.find('.thumbnail:first')

.appendTo(slideWrap)

.parent()

.css({'left': 0,

'margin-left':'10px'});

});

setTimeout(function(){ nextLink.attr('name','next') }, 600);

}

});

prevLink.click(function(){

if( prevLink.attr('name') == 'prev' ) {

prevLink.removeAttr('name');

slideWrap

.css({'left': newLeftPos})

.find('.thumbnail:last')

.prependTo(slideWrap)

.parent()

.animate({left: 0}, 500);

setTimeout(function(){ prevLink.attr('name','prev') }, 600);

}

});

}

htmSlider();

})

А сама галерея - так:

Код (Text):

<div class="gallery">

<div class="b_photo">

<img src="gallery/big_thumbs/<?=$gallery[0]['gallery_src'];?>" id="pic" />

</div>

<div class="thumb_box">

<div class="left_arr" name="prev"></div>

<div class="tmb_slidearea">

<div class="tmb_slider">

<?

foreach($gallery as $gkey=>$gval)

{

if($gkey == 0)

echo '<img ct="'.$gval['gallery_src'].'" src="gallery/small_thumbs/'.$gval['gallery_src'].'" id="pic'.$gval['gallery_id'].'" class="thumbnail" style="border-color:#FD7600;" />';

else

echo '<img ct="'.$gval['gallery_src'].'" src="gallery/small_thumbs/'.$gval['gallery_src'].'" id="pic'.$gval['gallery_id'].'"class="thumbnail" />';

}

?>

</div>

</div>

<div class="right_arr" name="next"></div>

<div style="clear:both;"></div>

</div>

</div>

<?}?>

Your · 15 ноя 2012

Опять вы за свое...
Причем тут JQuery?

У вас не подключена библиотека, либо конфликт, откройте $.noConflict();

Ошибка в чтении кода

AngelsPrayer Активный пользователь

smitt Старожил

AngelsPrayer Активный пользователь

igordata Суперстар
Команда форума Модератор

Your Старожил

AngelsPrayer Активный пользователь

Your Старожил

smitt Старожил

AngelsPrayer Активный пользователь

Your Старожил

Быстрый поиск

Ошибка в чтении кода

AngelsPrayer Активный пользователь

smitt Старожил

AngelsPrayer Активный пользователь

igordata Суперстар Команда форума Модератор

Your Старожил

AngelsPrayer Активный пользователь

Your Старожил

smitt Старожил

AngelsPrayer Активный пользователь

Your Старожил

igordata Суперстар
Команда форума Модератор