3D jQuery - actie toevoegen op keydown

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Robin S

Robin S

30/05/2012 16:22:48
Quote Anchor link
Beste leden,

Op dit moment heb ik een script welke een soort carousel/slider laat zien aan de hand van jQuery.
Zie voorbeeld hier:
http://rcsdesign.nl/ease/ease.html

Als je op het vlak links of rechts drukt dan roteert het object zich naar het goede vlak toe, dit werkt perfect op dit moment.
Nu wil ik graag dat deze actie ook op te roepen is door een toets op het toetsenbord in te drukken.

Dit is mijn Javascript code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
        <script>
            $(document).ready(function() {
                $('li')
                    .bind({
                        "reposition": function() {
                            var degrees = $(this).data('roundabout').degrees,
                                roundaboutBearing = $(this).parent().data('roundabout').bearing,
                                rotateY = Math.round(roundaboutBearing - degrees);
                            
                            $(this).css({
                                "-webkit-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
                                "-moz-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
                                "transform": "perspective(2000) rotateY(" + rotateY + "deg)"
                            });
                        }
                    })
                
                $('ul').roundabout({
                    minScale: 0.8,
                    easing: 'easeOutExpo',
                    shape: 'square',
                    duration: 800
                });
            });
        </script>


Dit is de HTML van de slider/carousel:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
        <ul>
            <li><span>Block 1</span></li>
            <li><span>Block 2</span></li>
            <li><span>Block 3</span></li>
            <li><span>Block 4</span></li>
            <li><span>Block 5</span></li>
        </ul>


Heeft iemand enig idee hoe ik de keydown functie aan bovenstaand script kan toevoegen? Ik heb het volgende al gevonden maar weet niet precies hoe ik dit in kan bouwen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
        $(document).keydown(function(e) {
          if (e.keyCode == 37 || e.keyCode == 38) {  // left or up
            // HIER DE ACTIE
          }
          if (e.keyCode == 39 || e.keyCode == 40) {  // right or down
            // HIER DE ACTIE
          }
        });


Alvast bedankt als iemand mij hiermee kan helpen!

Mvg,
Robin.
 
PHP hulp

PHP hulp

18/01/2021 15:10:28
 
Kris Peeters

Kris Peeters

30/05/2012 17:56:10
Quote Anchor link
Ik heb nog eens het zelfde truukje uitgevoerd als de vorige keer.
Drukken op de pijltjes triggert een click op de juiste <li>.

Een probleem dat zich nog stelt, is dat je niet te vlug mag klikken. Als je op een pijl drukt terwijl het draaien bezig is, reageert de carousel niet zoals het mijn bedoeling is.
Dat moet dus nog wat beter (checken op "idle" of zo ...).

Maar voorlopig ...

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<script>
      var li_index = 0;  
      var li_length = 0;
      
      $(document).ready(function() {
        li_length = $('ul li').length;
        
        /**
        * returns the index of the li within the ul.  sets the new value to the global var
        * @param (int) inc: the number of places you want to add to the index...
        */
        function rangeIndex(inc) {
          var index = (li_index + inc) % li_length;
          if (index < 0) {
            index += li_length;
          }
          li_index = index;
          return index;
        }
        
        $(document).keydown(function(e) {
          if (e.keyCode == 37 || e.keyCode == 38) {  // left or up
            // HIER DE ACTIE
            $($('ul li')[rangeIndex(-1)]).click();
          }
          if (e.keyCode == 39 || e.keyCode == 40) {  // right or down
            // HIER DE ACTIE
            $($('ul li')[rangeIndex(1)]).click();
          }
        });
        $('li')
          .bind({
            "reposition": function() {
              var degrees = $(this).data('roundabout').degrees,
                  roundaboutBearing = $(this).parent().data('roundabout').bearing,
                  rotateY = Math.round(roundaboutBearing - degrees);
              
              $(this).css({
                "-webkit-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
                "-moz-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
                "transform": "perspective(2000) rotateY(" + rotateY + "deg)"
              });
            }
          })
        $('ul').roundabout({
          minScale: 0.8,
          easing: 'easeOutExpo',
          shape: 'square',
          duration: 800
        });
      });
</script>
 
Robin S

Robin S

30/05/2012 22:20:59
Quote Anchor link
@Kris:
Enorm bedankt voor het helpen! Ik was ook erg blij met je vorige script :)

Ik heb je even doorgenomen en het ziet er erg logisch uit, echter wanneer ik het uitvoer werkt het niet meer:
http://rcsdesign.nl/ease/ease2.html

Zoals je ziet staan alle vlakken nu onder elkaar. Weet jij misschien wat dit is?
 
Fons Seesink

Fons Seesink

31/05/2012 00:08:30
Quote Anchor link
Waarom geen normale button maken met een onclick event dat je koppelt aan animateToNextChild en animateToPreviousChild
Geef de button een ID en voor en na de code op de website van de maker zet je een enable en disable van de button.
of is dat te kort door de bocht?
 
Kris Peeters

Kris Peeters

31/05/2012 09:14:18
Quote Anchor link
Er zit precies ergens een syntax/parse error


------

helemaal op het einde nog een });
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
...
        duration: 800
        });
    </script>

moet
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
...
        duration: 800
        });
      });
    </script>



-------------------
Update
Fons Seesink op 31/05/2012 00:08:30:
Waarom geen normale button maken met een onclick event dat je koppelt ...


Ik heb even naar de code gekeken; roudabout geeft je inderdaad die mogelijkheid.

Dat wordt dan zoiets:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
  <head>
    <script src="http://rcsdesign.nl/ease/mint/?js" type="text/javascript"></script>
    <meta charset="utf-8" />
    <title>3D</title>
    
    <link href="http://rcsdesign.nl/ease/assets/projects/roundabout2/demos/demos.css" rel="stylesheet" />
    <style>
      ul {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        width: 32em;
        height: 24em;
        z-index: 1;
      }
      li {
        height: 20em;
        width: 20em;
        background-color: #ccc;
        text-align: center;
        cursor: pointer;
        -webkit-backface-visibility: hidden;
      }
        li.roundabout-in-focus {
          cursor: default;
        }
      span {
        display: block;
        padding-top: 6em;
      }
      #ipad {
        background-image: url('http://rcsdesign.nl/ease/images/ipad2.png');
        width: 523px;
        height: 340px;
        position: absolute;
        z-index: 2;
        top: 0px;
        left: 50%;
        margin-left: -265px;
        margin-top: 28px;
        display: none;
      }
      #btnPrev {
        /* display: none; */
      }
      #btnNext {
        /* display: none; */
      }
    </style>

  </head>
  <body>
    
    <div id="ipad"></div>
    
    <input type="button" id="btnPrev" value="prev">
    <input type="button" id="btnNext" value="next">
    
    <ul>
      <li><span>Block 1</span></li>
      <li><span>Block 2</span></li>
      <li><span>Block 3</span></li>

      <li><span>Block 4</span></li>
      <li><span>Block 5</span></li>
      <li><span>Block 6</span></li>
      <li><span>Block 7</span></li>
    </ul>
    
    <script src="http://rcsdesign.nl/ease/script/jquery.js"></script>
    <script src="http://rcsdesign.nl/ease/script/jquery.roundabout2.js"></script>
    <script src="http://rcsdesign.nl/ease/script/jquery.easing.js"></script>
    <script>
      $(document).ready(function() {
        $(document).keydown(function(e) {
          if (e.keyCode == 37 || e.keyCode == 38) {  // left or up
            $('#btnPrev').click(); // trigger a click on the prev button
          }
          if (e.keyCode == 39 || e.keyCode == 40) {  // right or down
            $('#btnNext').click(); // trigger a click on the next button
          }
        });
        $('li')
          .bind({
            "reposition": function() {
              var degrees = $(this).data('roundabout').degrees,
                  roundaboutBearing = $(this).parent().data('roundabout').bearing,
                  rotateY = Math.round(roundaboutBearing - degrees);
              
              $(this).css({
                "-webkit-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
                "-moz-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
                "transform": "perspective(2000) rotateY(" + rotateY + "deg)"
              });
            }
          })
        $('ul').roundabout({
          minScale: 0.8,
          easing: 'easeOutExpo',
          shape: 'square',
          btnNext: '#btnNext',
          btnPrev: '#btnPrev',
          duration: 800
        });
      });
    </script>
  </body>
</html>


(ik heb de href's en src's een absoluut adres gegeven, zodat het zonder meer werkt...)

Je staat vrij om die buttons onzichtbaar te maken, zie css ...


Ik zou trouwens aanraden dat je die <ul> een specifieke class of id meegeeft, kwestie dat niet elke <ul> en <li> raar begint te doen.

iets als:

<ul class="roundabout">
...

en dan

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
$('ul.roundabout li')
          .bind({
....

 $('ul.roundabout').roundabout({
...
Gewijzigd op 31/05/2012 13:58:56 door Kris Peeters
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.