Προς το περιεχόμενο

Κατηγορίες εικόνων με jQuery

kapnos23

Από τον kapnos23
στο Web Design - Development

Προτεινόμενες αναρτήσεις

kapnos23 Proficient

kapnos23

Δημοσ.
Δημοσ.

Γεια σας,

 

Όπως δείχνει η εικόνα έχω μια σελίδα με κάποιες φωτογραφίες που ήταν πατάς πάνω τους ανοίγει ένα lightbox σε jquery. Τα μαύρα κουτιά διαχωρίζουν τις κατηγορίες των φωτογραφιών. Θέλω όταν πατάω πάνω στο μαύρο κουτί να κάνει expand/collapse την κατηγορία οριζοντίως κι αν γίνετε να υπάρχει επιλογή για expand/collapse all όπως φαίνεται στις εικόνες. Αν γίνεται κάτι σε jquery ή κάτι παρόμοιο;

Έχω κάνει μια αρχή αλλά δεν δουλεύει...

 

Ευχαριστώ!

 

attachment.php?attachmentid=72850&d=1274765113

attachment.php?attachmentid=72851&d=1274765113

>   1.

     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Untitled Document</title>
     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript">
     var cat1_expanded = false;
     var cat2_expanded = false;

     function toggleExpand(category_class, expanded) {
     if (expanded) {
     $('.'+category_class).hide('slide', { direction: "left" }, 1000);
     } else {
     $('.'+category_class).show('slide', { direction: "right" }, 1000);
     }
     }
     </script>
     <style type="text/css">
     body .thumbnails {
     background: #4a4a4a;
     }
     .cat-divider {
     background: #EEEEEE;
     }
     .cat1 {

     }
     .cat2 {

     }
     </style>
     </head>

     <body>
     <div class="thumbnails">
     <img class="cat-divider" src="joomla_logo_black.jpg" width="100" height="100" onclick="toggleExpand('cat1',cat1_expanded)">
     <img class="cat1" src="stisimoselidas.gif" width="100" height="100" >
     <img class="cat1" src="stisimoselidas2.gif" width="100" height="100" >
     <img class="cat1" src="stisimoselidas.gif" width="100" height="100" >
     <img class="cat-divider" src="joomla_logo_black.jpg" width="100" height="100" onclick="toggleExpand('cat2',cat2_expanded)">
     <img class="cat2" src="stisimoselidas2.gif" width="100" height="100" >
     <img class="cat2" src="stisimoselidas.gif" width="100" height="100" >
     <img class="cat2" src="stisimoselidas2.gif" width="100" height="100" >
     </div>
     </body>

kapnos23 Proficient

kapnos23

Δημοσ.
  • Μέλος
Δημοσ.

Το accordion είναι για να είναι μόνο μια κατηγορία ανοιχτή την φορά ή κάνω λάθος; Εγώ θέλω σαν το accordion αλλά να ανοιγοκλείνω κάθε κατηγορία ανεξάρτητα από την άλλη και αν γίνεται να έχει επιλογή expand/collapse all.

_tasos Proficient

_tasos

Δημοσ.
Δημοσ.

Η jQuery έχει την toggle(), όπου αν την καλέσεις για ένα element το εμφανίζει ή το κρύβει κ κάνει το effect του accordion ανεξάρτητα σε κάθε element. Π.χ.

>
<a href="#" onclick="javascript:toggle_cat_1()">Category 1</a>
<div id="cat1">
.......
</div>

<script>
function_toggle_cat_1()
{
$('#cat1').toggle();
}
</script>

Ψάξε λίγο στο google για να δεις πως ακριβώς μπορείς να τη χρησιμοποιήσεις. Το καλύτερο βέβαια θα ήταν να κάνεις φτιάξεις έναν listener για το click event του <a>. Πιο unobtrusive προσέγγιση.

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

Προς την λίστα θεμάτων
  • Δημιουργία νέου...