imagecube js ошибка вращения куба - PullRequest
Новая
       30

imagecube js ошибка вращения куба

0 голосов
/ 08 февраля 2012

У меня небольшая проблема с плагином jcery для imagecube.http://keith -wood.name / imageCube.html

Я получил, что он отлично работает на домашней странице с тремя изображениями UNLINKED.Когда я размещаю ссылки вокруг них, вращение вверх идет шатко.У кого-нибудь есть мысли?Заранее спасибо.Ссылка для следования:

http://www.bigideaadv.com/a-z/

Ответы [ 2 ]

1 голос
/ 09 февраля 2012

Решение Scessor - это, вероятно, верный путь, но из интереса вы также можете динамически оборачивать и распаковывать изображения в теги <a> при каждом повороте.Обработчики imageCube beforeRotate и afterRotate делают это возможным.

HTML: 

<div id="image_carousel2" style="width: 960px; height:353px; left:-10px; position:relative; margin:0 auto; background:transparent !important;">
    <img src="/a-z/./images/slide1_alt.jpg" width="960" height="353" url="http://www.bigideaadv.com/a-z/generic" />
    <img src="/a-z/./images/slide2_alt.jpg" width="960" height="353" url="http://www.bigideaadv.com/a-z/about-a-and-z" />
    <img src="/a-z/./images/slide3_alt.jpg" width="960" height="353" url="http://www.bigideaadv.com/a-z/operations" />
</div>

javascript: 

$(document).ready(function() {
    $('#image_carousel2').imagecube({
        direction: 'up',
        expansion: 25,
        segments: 15,
        reduction: 30,
        speed: 1000,
        pause: 7000,
        shading: false,
        //Before rotate, remove wrapping anchor (if it exists) from current img.
        beforeRotate: function startRotate(current, next) { 
            if(current.parentNode.tagName.toLowerCase() == 'a') {//Safety
                $(current).unwrap();//Remove the wrapping anchor.
            }
        },
        //After rotate, wrap next img in its anchor 
        afterRotate: function endRotate(current, next) { 
            var $next = $(next);
            $next.wrap($next.data('anchor'));//Wrap the next img in its anchor.
        }
    });
    //Now create an <a> node for each img in the cube,
    //and save as a .data() property of its <img> node.
    //This allows reuse of <a> nodes, avoiding the need to 
    //(re)create them dynamically at each rotation.
    $('#image_carousel2 img').each(function(i){
        var $this = $(this);
        var $a = $('<a>').attr('href', $this.attr('url'));
        $this.data('anchor', $a);
        if(i==0){ $this.wrap($a); }//Wrap the first node in its anchor.
    });
});

Как и следовало ожидать, HTML-код упрощен, но jsболее сложный.

Обратите внимание, что в этом решении используются пользовательские атрибуты <img ... url="...">, поэтому страница может не пройти проверку в большинстве валидаторов.

1 голос
/ 09 февраля 2012

Вы можете использовать атрибут onclick с window.location.href=">insert url here<" для каждого изображения с помощью css cursor: pointer;, вместо этого оборачивая тег anker:

HTML: 

<div id="image_carousel2">
    <img src="/a-z/./images/slide1_alt.jpg" width="960" height="353" onclick="window.location.href='/a-z/generic';" />
    <img src="/a-z/./images/slide2_alt.jpg" width="960" height="353" onclick="window.location.href='/a-z/about-a-and-z';" />
    <img src="/a-z/./images/slide3_alt.jpg" width="960" height="353" onclick="window.location.href='/a-z/operations';" />
</div>

CSS: 

#image_carousel2 img {
    cursor: pointer;
}

Также см. этот пример .

...