Слайд-шоу Javascript с script.aculo.us - PullRequest
Новая
       24

Слайд-шоу Javascript с script.aculo.us

0 голосов
/ 02 марта 2012

Я делаю слайд-шоу на своем сайте php mvc, используя script.aculo.us, чтобы оживить его.Модель ищет изображения из базы данных, заполняет их в представлении, а затем javascript использует script.aculo.us для его анимации.Однако, когда он попадает на второй слайд, он перестает работать, и я могу найти это сообщение об ошибке в консоли Chrome:

Uncaught TypeError: Невозможно вызвать метод 'getStyle' из неопределенного

Я не могу понять, почему это не работает.Вот кодЛюбые идеи?

PHP: 

<div id="main">
<div id="mainContainer">
    <div id="showcaseContent">
<?php $i = 0; foreach($showcase as $ShowcaseItems): ?>
        <div id="showcaseSlide<?php echo $i; ?>" <?php if($i != 0){ echo 'style="display: none;"'; }else{ echo 'style="display: block;"'; } ?> >
            <img src="<?php echo $ShowcaseItems['showcase_image']; ?>" width="720px" height="275px" />
        </div>
<?php ++$i; endforeach ?>
    </div>
</div>

Javascript (Я должен использовать 4 верхних цикла, потому что клиент может поместить 2-10 изображений в слайд-шоу витрины): 

var slides = new Array();

for(i=0; i<=10; i++){
    slides[i] = "showcaseSlide"+i;
    if(document.getElementById(slides[i]) == null) break;
};

var wait = 5000;

function startShowcase(){
    setInterval(showcase(), wait);
};

function showcase(){
    var i = 0;
    Effect.Fade(slides[i], {duration: 1.0, from: 1.0, to: 0.0});
    i++
    if(i == slides.count - 1) {i=0};
    Effect.Appear(slides[i], {duration: 1.0, from: 0.0, to: 1.0});

};

Редактировать:

Ошибка появляется в строке 544 скрипта effect.js, который поставляется с script.aculo.us, который (насколько это возможно)как я могу понять) это строка, которая начинается с: в следующем коде: 

Effect.Appear = function(element) {
  element = $(element);
  var options = Object.extend({
  from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
Uncaught TypeError: Cannot call method 'getStyle' of undefined
  to:   1.0,
  // force Safari to render floated elements properly
  afterFinishInternal: function(effect) {
    effect.element.forceRerendering();
  },
  beforeSetup: function(effect) {
    effect.element.setOpacity(effect.options.from).show();
  }}, arguments[1] || { });
  return new Effect.Opacity(element,options);
};

А вот соответствующие разделы отображаемой страницы: 

<!DOCTYPE html>
<head>

<!--Title-->
<title>Urban Feather | Home</title>

<!--CSS Styles-->
<link rel="stylesheet" href='http://www.example.com/2012/styles/layout.css' type="text/css" media="screen, projection" />
<link rel="stylesheet" href='http://www.example.com/2012/styles/forms.css' type="text/css" media="screen, projection" />
<link rel="stylesheet" href='http://www.example.com/2012/styles/fonts.css' type="text/css" media="screen, projection" />

<!--Javascript Scripts-->
<script src="http://www.example.com/2012/scripts/sonOfSuckerfish.js" type="text/javascript"></script>
<script src="http://www.example.com/2012/scripts/script.aculo.us/prototype.js" type="text/javascript"></script>
<script src="http://www.example.com/2012/scripts/script.aculo.us/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="http://www.example.com/2012/scripts/selectreplace.js" type="text/javascript"></script>
<script src="http://www.example.com/2012/scripts/showcase.js" type="text/javascript"></script>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>

</head>

<div id="main">
    <div id="mainContainer">
        <div id="showcaseContent">
            <div id="showcaseSlide0" style="display: block;" >
                <img src="http://www.example.com/2012/images/showcase/client3.jpg" width="720px" height="275px" />
            </div>
            <div id="showcaseSlide1" style="display: block;" >
                <img src="http://www.example.com/2012/images/showcase/client3.jpg" width="720px" height="275px" />
            </div>
            <div id="showcaseSlide2" style="display: block;" >
                <img src="http://www.example.com/2012/images/client3.jpg" width="720px" height="275px" />
            </div>
        </div>

Ответы [ 2 ]

0 голосов
/ 07 марта 2012

Благодаря stormdrain и моему другому посту ( разрыв цикла на основе элемента, которого не существует ), я решил проблему. Цикл не работал, так как он был вызван до того, как div были обработаны, и код нуждался в небольшой реструктуризации. Вот мой рабочий код: 

var count = 0; //A loop for the counter
var wait = 4000; //The amount of time (ms) inbetween transitions
var slides = []; //The empty array of slide ids

function startShowcase(){
    for(var i=0; i<10; i++){
        slides[i] = "showcaseSlide"+i;;
        if(!document.getElementById(slides[i])) break;
    };

    setInterval(showcase, wait);
};

function showcase(){
    if(count==slides.length-2){
        count=0;
    }
    if(document.getElementById(slides[count]).style.display==='none'){
        Effect.Appear(slides[count], {duration: 1.0, from: 0.0, to: 1.0});
    }else{
        Effect.Fade(slides[count], {duration: 1.0, from: 1.0, to: 0.0});
    }
    count++;
};
0 голосов
/ 02 марта 2012

http://prototypejs.org/api/element/getStyle

Safari возвращает нулевое значение для любого не встроенного свойства, если элемент скрыт (для отображения установлено значение «none»). 

<?php if($i != 0){ echo 'style="display: none;"'; }else...

function showcase(){

    var i = 0;

    Effect.Fade(slides[i], {duration: 1.0, from: 1.0, to: 0.0});
    //slide[0] is the only slide without display:none, 
    //so the first slide (slide[0]) works (Fades)! 
    //Once var i increments, everything is display:none and the
    //getStyle used in prototypes Effect.Appear method doesn't work

    i++

    if(i == slides.count - 1) {i=0};
    Effect.Appear(slides[i], {duration: 1.0, from: 0.0, to: 1.0});
    //slides[1] has display:none so getStyle in Appear breaks

};

это все равно мое предположение ...

Обновление:

Думаю, что это проблема со счетчиком: 

var i = 0;
Effect.Fade(slides[i], {duration: 1.0, from: 1.0, to: 0.0});
i++
if(i == slides.count - 1) {i=0};
Effect.Appear(slides[i], {duration: 1.0, from: 0.0, to: 1.0});

i всегда будет 0, когда showcase() вызывается интервалом, поэтому на втором интервале он пытается сделать slides[0] Effect.Fade, который уже был исчез на первом.

Это работает: 

var slides = new Array();
var count = 0;
for(i=0; i<=10; i++){
    slides[i] = "showcaseSlide"+i;
    if(document.getElementById(slides[i]) == null) break;
};

var wait = 1000;//shortened because I'm impatient
function startShowcase(){
    setInterval(showcase, wait);
};

function showcase(){
    if(count==slides.length-1){
        count=0;
    }
    if($(slides[count]).style.display==='none'){
        Effect.Appear(slides[count], {duration: 1.0, from: 0.0, to: 1.0});
    }else{
        Effect.Fade(slides[count], {duration: 1.0, from: 1.0, to: 0.0});
    }
    count++;
};

Технически, это более технически;также правильно: 

var slides = [], count = 0, wait = 4000;
for(var i in $('showcaseContent').select('div')){slides[i] = "showcaseSlide"+i;};
function startShowcase(){setInterval(showcase, wait);};
function showcase(){
    (count==slides.length)?count=0:count=count;
    ($(slides[count]).style.display==='none')?
        Effect.Appear(slides[count], {duration: 1.0, from: 0.0, to: 1.0}):
        Effect.Fade(slides[count], {duration: 1.0, from: 1.0, to: 0.0});
    count++;
};
startShowcase();

ДА

...