помощь новичку в jquery imagecube - PullRequest
Новая
       40

помощь новичку в jquery imagecube

1 голос
/ 26 мая 2011

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

Я работаю над этим ImageCube http://keith -wood.name / imageCube.html , но я бы хотел сделать так, как этот http://www.cancan.ro/ с thumbscroller.

Я знаю, чтобы все это работало только так, поэтому, если вы знаете лучший способ сделать это, просто скажите мне.

Какие бы значения я ни указывал в html или javascript не может работать так, как должно.Например, в случае снизу все thumbs получают первое значение из документа, в данном случае «0», которое равно uluru.jpg.So, другими словами (в данном случае снизу) всякий раз, когда я нажимаю на любое другое thumbs Куб несколько раз поворачивает изображение Улуру.

Итак, как я могу назначить значение coresponding для каждого большого пальца img id , чтобы функционировать как thumbscroller?

Я также получил этот ответ от автора

Вы можете использовать обратный вызов afterRotate , чтобы получать уведомления при вращении куба, а затем обновлять указатель всписок миниатюр.Вы можете использовать команду 'rotate' , чтобы включить куб по требованию для кнопок «предыдущий / следующий» и щелкнуть миниатюру, чтобы показать это изображение.См. Примеры на веб-сайте для примера кода.

Я не могу найти, как использовать обратный вызов afterRotate и обновить указатель.

Так что, если вы можете мне помочь, я был бы очень признателен, и если у вас есть другие идеи, пожалуйста, дайте мне весь код, потому что, как я уже сказал, я очень новичок в этой области.

Вот мой код

Код: 

<div id="directionCube" class="cube">

            <img src="img/uluru.jpg" >
            <img src="img/islands.jpg" >
            <img src="img/gorge.jpg" >
        </div>




            <input id="direction" value="left" type="hidden"> <input id="current" option value='0' type="hidden" /> <img id="thumb1" src="1_thumb.jpg">

          <script type="text/javascript">
        $('#directionCube').imagecube({direction: 'up', repeat: true, pause: 3000, shading: true});

        $('#thumb1').click(function() {
            var cube = $('#directionCube');
            var current = parseInt($('#current') .val(), 10);
            cube.imagecube('change', {direction:$('#direction') .val()}).
                imagecube('rotate', current, function() {
                    $('#current').text($(cube.imagecube('next')).attr('title'));
                });
        });

        </script>


       <input id="direction" value="left" type="hidden"> <input id="current"  option value='1' type="hidden" ><img id="thumb2" src="2_thumb.jpg">

    <script type="text/javascript">
        $('#directionCube').imagecube({direction: 'up', repeat: true, pause: 3000, shading: true});

        $('#thumb2').click(function() {
            var cube = $('#directionCube');
            var current = parseInt($('#current') .val(), 10);
            cube.imagecube('change', {direction:$('#direction') .val()}).
                imagecube('rotate', current, function() {
                    $('#current').text($(cube.imagecube('current')).attr('title'));
                });
        });     

        </script>


     <input id="direction" value="left" type="hidden"> <input id="current"  option value='2' type="hidden" ><img id="thumb3" src="3_thumb.jpg">

    <script type="text/javascript">
        $('#directionCube').imagecube({direction: 'up', repeat: true, pause: 3000, shading: true});

        $('#thumb3').click(function() {
            var cube = $('#directionCube');
            var current = parseInt($('#current') .val(), 10);
            cube.imagecube('change', {direction:$('#direction') .val()}).
                imagecube('rotate', current, function() {
                    $('#current').text($(cube.imagecube('current')).attr('title'));
                });
        });     

        </script>

1 Ответ

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

Вы должны использовать интерактивные поверхности в Three.js .В конечном итоге вы будете иметь больше контроля над чем-либо 3D, если только вы не боитесь кодирования вне jQuery.У них есть и рендеры Canvas и WebGL.

...