jquery e proprietà

[giuseppe500]

ciao.
Sto scancherando con un plugin jquery, questo
Lo script funziona , ho messo le varie immagini i file js ecc..
Non so pero' come leggere il valore dell' indice dello slide corrente dinamicamente;
ho visto che c'è questa proprietà: "current_slide_number" ma non so come utilizzarla.
Dato che è un plugin JQuery mi aspetto che funzioni in un modo comune a tutti i plugin , ma non so come , so che c'è google , ma da dove è meglio partire?
come si fa a leggere una proprietà di un plugin jquery?
e' possibile generare un evento quando cambia l'indice? o dovro' usare un timer?
grazie.

[ciro1919]

Non ho capito cosa devi fare...

[giuseppe500]

vorrei leggere dall oggetto plugin jquery una proprietà e non so come fare.
ciao.

[giuseppe500]

scusa Ciro ,non c'era nessuna cattiveria(ho pensato poi che potevo essere frainteso) avevo poco tempo e ho butato li qualcosa , scusa.

Allora ho un plugin jquery di cui ho postato l'indirizzo nel primo post è un carousel , una specie di slider di immagini e vorrei da js interrogare l'oggetto per accedere alle sue proprietà(variabili o metodi getter).

Il problema è che jquery crea un oggetto:

<link rel="stylesheet" href="agile_carousel.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.1.js"></script>
<script>
    // Code used for "Flavor 2" example (above)
    
    $.getJSON("agile_carousel/agile_carousel_data.php", function(data) {
        $(document).ready(function(){
            $("#flavor_2").agile_carousel({
                
                // required settings
                
                carousel_data: data,
                carousel_outer_height: 330,
                carousel_height: 230,
                slide_height: 230,
                carousel_outer_width: 480,
                slide_width: 480,
                                                
                // end required settings
                                                
                transition_type: "fade",
                transition_time: 600,
                timer: 3000,
                continuous_scrolling: true,
                control_set_1: "numbered_buttons,previous_button,
                ... (continues on same line)... pause_button,next_button",
                control_set_2: "content_buttons",
                change_on_hover: "content_buttons"
            });
        });
    });
 </script>

$("#flavor_2").agile_carousel penso sia l'oggetto plugin Jquery, ma ho difficoltà di base a capire come distinguere l'html generato dell' oggetto dall' oggetto js vero e proprio .Ho visto nei sorgenti js del plugin che esistono delle variabili , che è quello a cui vorrei accedere e leggere , non dell' html, ma dei valori!


Ho letto questo:
Controls

numbered_buttons: One numbered button displayed per slide
group_numbered_buttons: One numbered button listed per x number_slides_visible
content_buttons: Adds buttons which contain the content specified in the "content_button" property value of the JSON data.
see Flavor 2 & Flavor 3 examples (above).
see Data section (above).
pause: play/pause button
previous_button: previous button
next_button: next button
hover_previous_button: previous button which appears on mouseover
hover_next_button: next button which appears on mouseover
See Flavor 1 example (above).
slide_count: total number of slides
current_slide_number: current slide number

che sarebbero le variabili che vorrei leggere.
ad es penso che leggendo la variabile current_slide_number vorrei leggere 0 se sono sulla prima immagine dello slide , se è 1 sono sulla seconda immagine ecc......

Inoltre vorrei sapere come agganciare se è possibile una funzione callback al cambiamento dell'immagine.

Ho letto il codice dello script , ma non ho capito come accedere ai valori con un get o leggendo una variabile .

mi rendo conto che dovrei documentarmi meglio , ma vorrei capire qualcosa che mi è dura a capire.
poi, da dove mi consigliate di partire per capire bene jquery ?
libri consigliati ,link?
grazie

[giuseppe500]

scusate se insisto , ma non dovrebbe essere una cosa semplicissima?!

$("#flavor_2").agile_carousel
penso sia l'oggetto plugin Jquery, ma ho difficoltà di base a capire come distinguere l'html generato dell' oggetto js vero e proprio .Ho visto nei sorgenti js del plugin che esistono delle variabili , che è quello a cui vorrei accedere e leggere , non devo leggere dell' html, ma dei valori(variabili alla fine).



grazie.

[ciro1919]

Adesso ho capito. Dammi qualche minuto che devo vedere un po' il codice.

[ciro1919]

Prima vado in bagno... hahah

[ciro1919]

Eccolo, risolvo il tuo problema, spero.

Il tuo codice:

<link rel="stylesheet" href="agile_carousel.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.1.js"></script>
<script>
    // Code used for "Flavor 2" example (above)
    
    $.getJSON("agile_carousel/agile_carousel_data.php", function(data) {
        $(document).ready(function(){
            $("#flavor_2").agile_carousel({
                
                // required settings
                
                carousel_data: data,
                carousel_outer_height: 330,
                carousel_height: 230,
                slide_height: 230,
                carousel_outer_width: 480,
                slide_width: 480,
                                                
                // end required settings
                                                
                transition_type: "fade",
                transition_time: 600,
                timer: 3000,
                continuous_scrolling: true,
                control_set_1: "numbered_buttons,previous_button,
                ... (continues on same line)... pause_button,next_button",
                control_set_2: "content_buttons",
                change_on_hover: "content_buttons"
            });
        });
    });
 </script>

<link rel="stylesheet" href="agile_carousel.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.1.js"></script>
<script>
    // Code used for "Flavor 2" example (above)
    
    $.getJSON("agile_carousel/agile_carousel_data.php", function(data) {
        $(document).ready(function(){
            $("#flavor_2").agile_carousel({
                
                // required settings
                
                carousel_data: data,
                carousel_outer_height: 330,
                carousel_height: 230,
                slide_height: 230,
                carousel_outer_width: 480,
                slide_width: 480,
                                                
                // end required settings
                                                
                transition_type: "fade",
                transition_time: 600,
                timer: 3000,
                continuous_scrolling: true,
                control_set_1: "numbered_buttons,previous_button",
                control_set_2: "content_buttons",
                control_set_3: "current_slide_number",
                change_on_hover: "content_buttons"
            });
        });
    });
 </script>

Ho semplicemente aggiunto:

control_set_3:"current_slide_number",

se poi Non ti va bene dove te lo mette in automatico, cioè in alto a sinistra. prendi il tuo bel file JS, che dovrebbe essere:
agile_carousel.alpha.js riga 471-478, (se hai la versione .min.js ti devi cercare la riga di codice con il Find and Replace dell'editor che usi) arrivati a questo punto cerchi la riga di codice:

            
// update slide number

            function update_current_slide_number(slide_num) {
                if (current_slide_number_display_length > 0) {
                    current_slide_number_display.html(slide_num);
					alert(slide_num);					 
                }
            }

Dove impaginano il tuo bel numerino... Qui vedi tu, dichiara una variabile globale insieme a quelle native, e usa la TUA variabile con il numero della slide corrente dove e quando vuoi. Di default ho notato che impaginandolo lo mette in alto a sx, ,ma con il css accedendo alle proprietà della classe:

current_slide_number

Per il callBack dipende che cosa devi fare, ti dico subito che in Ajax non ho molta esperienza..

[giuseppe500]

grazie Ciro , ho quasi capito.
Per callback intendevo di richiamare una funzione dal js della mia pagina che utilizza il plugin al cambiamento di un valore , in questo caso la current_slide_number.
per es come faccio una funzione che al cambiamento interno del plugin lancia una funzione js che ho nella pagina in cui è il plugin?
Ti dico come farei in c++:
passo l'indirizzo di una mia funzione e al cambiamento del valore invoco questa funzione con il (funzione)() se non ho parametri, altrimenti (funzione)(nSlide).
si puo fare in js?
a me basterebbe una funzione test che fa un alert(nSlide) per capire
grazie.

[ciro1919]

Se quello che ho capito è giusto non devi fare un CallBack, bastsa che fai così
Chiami la funzione tell_me_nSlide(); e la chiamai al posto di fare l'alert dove ti dicevo prima...
Cioè:

// update slide number

            function update_current_slide_number(slide_num) {
                if (current_slide_number_display_length > 0) {
                    current_slide_number_display.html(slide_num);
					tell_me_nSlide(slide_num);					 
                }
            }

crei la funzione dove vuoi, chiaramente se la crei in un altro file te lo devi importare, ma se è una funzione da 20 righe la metti infondo a questo e vai via che è un piacere .

function tell_me_nSlide(nSlide){
alert("Sei alla slide: "+nSlide);
}

io ho fatto una prova, uguale a quella che ti ho postato con la funzione da me scritta, e l'ho messa alla riga 878 dopo la funzione function timer_transition(){....} e funziona perfettamente, se vuoi vedere come funziona eccoti il link