SLIDESHOW ΜΕ ΚΟΥΜΠΙΑ ΠΛΟΗΓΗΣΗΣ ΚΑΙ LINK ΠΕΡΙΓΡΑΦΗΣ

SLIDESHOW ΜΕ ΚΟΥΜΠΙΑ ΠΛΟΗΓΗΣΗΣ ΚΑΙ LINK ΠΕΡΙΓΡΑΦΗΣ

Στο παρακάτω slideshow μπορείτε να βάλετε όσες εικόνες θέλετε, σε ότι διαστάσεις θέλετε, και σε κάθε μία από αυτές να εμφανίζεται πάνω αριστερα η περιγραφή που θέλετε η οποία είναι και ενεργό link που ανοίγει σε νέα καρτέλα και οδηγεί στο άλμπουμ των φωτογραφιών σας. 

ΠΡΟΒΟΛΗ ΕΙΚΟΝΩΝ ΑΠΟ ΑΝΑΠΤΥΣΟΜΕΝΟ ΜΕΝΟΥ

ΠΡΟΒΟΛΗ ΕΙΚΟΝΩΝ ΑΠΟ ΑΝΑΠΤΥΣΟΜΕΝΟ ΜΕΝΟΥ

Με τον παρακάτω σύντομο κώδικα μπορείτε να προβάλετε σε pop up window τις εικόνες που περιέχονται μέσα σε ένα αναπτυσόμενο μενού. Πάνω από την εικόνα μπορείτε να βάλετε και τίτλο, απλά αντικαταστήστε τους δικούς μου τίτλους εικόνων με τα κίτρινα γράμματα με τους δικούς σας. Τα links των εικόνων έχουν επισημανθεί με γαλάζιο χρώμα και πρέπει να βάλετε τα δικά σας στη θέση τους. Οι διαστάσεις των εικόνων πρέπει να είναι οι ίδιες. Ο κώδικας μπορεί να μπεί απλά σαν gadget ή ακόμα και μέσα σε σελίδες και αναρτήσεις όπως εδώ ακριβώς από κάτω.

SLIDESHOW ΜΕ ΚΟΥΜΠΙΑ ΠΛΟΗΓΗΣΗΣ, ΠΕΡΙΓΡΑΦΗ ΚΑΙ LINK

SLIDESHOW ΜΕ ΚΟΥΜΠΙΑ ΠΛΟΗΓΗΣΗΣ, ΠΕΡΙΓΡΑΦΗ ΚΑΙ LINK

Στο παρακάτω slideshow μπορείτε να βάλετε όσες εικόνες θέλετε, σε ότι διαστάσεις θέλετε, και σε κάθε μία από αυτές να εμφανίζεται κάτω δεξιά η περιγραφή που θέλετε η οποία μπορεί να είναι αν θέλετε και ενεργό link που ανοίγει σε νέα καρτέλα. Το συγκεκριμένο slideshow διαθέτει και κουμπιά πλοήγησης για να βλέπετε τις επόμενες ή τις προηγούμενες εικόνες του. Αλλάξετε τα πράσινα και γαλάζια links μου με τα δικά σας links εικόνων. Τις διαστάσεις του slideshow τις αλλάζετε στην πρώτη γραμμή του κώδικα css (style) εκεί που γράφει width:960px; height:580px;

ZOOM SLIDESHOW

ZOOM SLIDESHOW

Το παρακάτω zoom slideshow κάνει zoom in και zoom out εναλλάξ στις εικόνες που περιέχει. Τις διαστάσεις τις ρυθμίζετε εκεί του γράφει width:800px;height:500px; Αν εσείς θέλετε να βάλετε εικόνες αναλογίας π.χ. 3:2 θα αλλάξετε το width: σε 900px; και το height: σε 600px; Πρέπει όμως να αλλάξετε και το margin-left:-400px; σε -450 και το margin-top:-250px; σε -300. Όποια διάσταση δηλαδή δώσετε στο slideshow πρέπει να δώσετε ακριβώς την μισή ½ στα margin-left και margin-top. Για να αλλάξετε τον χρόνο εναλλαγής μεταξύ των εικόνων αλλάξτε το 5000 που βρίσκεται σχεδόν στο τέλος του κώδικα.

ΑΠΛΟ SLIDESHOW ME ΕΝΑΛΛΑΓΗ KEIMENOΥ ΚΑΙ ΕΙΚΟΝΩΝ

ΑΠΛΟ SLIDESHOW ME ΕΝΑΛΛΑΓΗ KEIMENOΥ ΚΑΙ ΕΙΚΟΝΩΝ

Το παρακάτω slideshow ξεκινάει αυτόματα μόνο του και μπορεί να κάνει εναλλαγή μεταξύ κειμένου και εικόνων. Το κείμενο μπορείτε να το βάλετε μόνο στην αρχή ή μόνο στο τέλος ή όπου θέλετε ενδιάμεσα στις εικόνες, ακόμα και να το παραλείψετε. Αλλάξτε τα δικά μου γαλάζια links εικόνων με τα δικά σας links. Αλλάξτε τα κίτρινα κείμενα με δικά σας.

SLIDESHOW ΜΕ 3 ΕΠΙΛΟΓΕΣ ΠΛΟΗΓΗΣΗΣ

SLIDESHOW ΜΕ 3 ΕΠΙΛΟΓΕΣ ΠΛΟΗΓΗΣΗΣ

Το παρακάτω slideshow έχει πολλαπλές επιλογές πλοήγησης. Η πρώτη είναι να πατήσετε το button START για να ξεκινήσει να παρουσιάζει τις εικόνες του, η δεύτερη είναι να πατήσετε το button ►► και να δείτε μία προς μία τις εικόνες που περιέχει και ή τρίτη είναι να επιλέξετε από το αναπτυσόμενο μενού όποια εικόνα θέλετε να προβληθεί. Μπορεί να μπεί σαν gadget σε οποιοδήποτε σημείο του blog μας αρκεί να προσαρμόσουμε τις διαστάσεις του.

SLIDESHOW ΜΕ ΤΙΤΛΟΥΣ ΚΑΙ ΠΕΡΙΓΡΑΦΗ

SLIDESHOW ΜΕ ΤΙΤΛΟΥΣ ΚΑΙ ΠΕΡΙΓΡΑΦΗ
Το παρακάτω slideshow ξεκινάει μόνο του αυτόματα και δέχεται τίτλους και περιγραφές για τις εικόνες που περιέχει. Δεν διαθέτει όμως κουμπιά πλοήγησης. Μπορείτε αντικαταστώντας τα μώβ links που βρίσκονται αμέσως πρίν από τα πορτοκαλί links των εικόνων του slideshow να παραπέμψετε όπου θέλετε όσους κλικάρουν τις εικόνες του slideshow. Μπορείτε να αλλάξετε τον χρόνο εναλλαγής των εικόνων αλλάζοντας το timeOut: 5000 που βρίσκετε στη 7^η γραμμή του κώδικα. 

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 6

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 6

Αυτό είναι ένα απλό slideshow που μπορεί να μπεί σε μία κενή html σελίδα του blogger ή σε μία καθαρή html σελίδα σε κάποιον html editor ή στο github διότι εμφανίζεται σε absolute position. Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε τον μία κενή html σελίδα του blogger όπου θα έχετε καθαρίσει το style της. Τα κίτρινα links των εικόνων του slideshow αλλάξτε τα με τα δικά σας links εικόνων.

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 5

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 5

Αυτό είναι ένα απλό slideshow που μπορεί να μπεί είτε σαν gadget είτε μέσα στον κώδικα της σελίδας σας. Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε τον εκεί που θέλετε να εμφανίζεται το slideshow. Τα κίτρινα links των εικόνων του slideshow αλλάξτε τα με τα δικά σας links εικόνων. 

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 4

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 4

Αυτό είναι ένα απλό slideshow που μπορεί να μπεί είτε σαν gadget είτε μέσα στον κώδικα της σελίδας σας. Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε τον εκεί που θέλετε να εμφανίζεται το slideshow. Τα κίτρινα links των εικόνων του slideshow αλλάξτε τα με τα δικά σας links εικόνων.

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 3

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 3

Αυτό είναι ένα απλό slideshow που μπορεί να μπεί σε μία κενή html σελίδα του blogger ή σε μία καθαρή html σελίδα σε κάποιον html editor ή στο github διότι εμφανίζεται σε absolute position. Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε τον μία κενή html σελίδα του blogger όπου θα έχετε καθαρίσει το style της. Τα κίτρινα links των εικόνων του slideshow αλλάξτε τα με τα δικά σας links εικόνων.

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 2

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 2

Με τον παρακάτω κώδικα μπορούμε να βάλουμε στο blog μας ένα απλό slideshow χωρίς κουμπιά εναλλαγής μεταξύ των εικόνων, αλλά με όσες εικόνες θέλουμε, με ότι διαστάσεις θέλουμε, αρκεί να έχουν όλες την ίδια διάσταση. Αλλάξτε τα ελαφρώς κόκκινα links των εικόνων με τις δικές σας εικόνες. Αλλάξτε τις διαστάσεις του slideshow αλλάζοντας τα γαλάζια νούμερα στο width="960" και το height="600". Αλλάξτε την ταχύτητα εναλλαγής των εικόνων αλλάζοντας το κίτρινο νούμερο 3000.

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 1

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW
Με τον παρακάτω κώδικα μπορούμε να βάλουμε στο blog μας ένα απλό slideshow χωρίς κουμπιά εναλλαγής μεταξύ των εικόνων, αλλά με όσες εικόνες θέλουμε, με ότι διαστάσεις θέλουμε, και με όποια ταχύτητα εναλλαγής των εικόνων επιλέξουμε. Αλλάξτε τα μώβ links των εικόνων με τις δικές σας εικόνες. Αλλάξτε τις διαστάσεις του slideshow αλλάζοντας τα γαλάζια νούμερα. Αλλάξτε την ταχύτητα εναλλαγής των εικόνων αλλάζοντας το πορτοκαλί νούμερο. Βάλτε το σωστό αριθμό εικόνων που έχει το slideshow σας αντικαθιστώντας το πράσινο νούμερο (step<9).

SIMPLE SLIDESHOW WITH NAVIGATION BUTTONS No 2

SIMPLE SLIDESHOW WITH NAVIGATION BUTTONS No 2

Με τον παρακάτω κώδικα μπορούμε να βάλουμε στο blog μας ένα απλό slideshow με κουμπιά εναλλαγής μεταξύ των εικόνων, με όσες εικόνες θέλουμε, με ότι διαστάσεις θέλουμε. Αλλάξτε τα πράσινα links των εικόνων με τις δικές σας εικόνες.

SIMPLE SLIDESHOW WITH NAVIGATION BUTTONS Νο 1

SIMPLE SLIDESHOW WITH NAVIGATION BUTTONS No 1 
Με τον παρακάτω κώδικα μπορούμε να βάλουμε στο blog μας ένα απλό slideshow με κουμπιά εναλλαγής μεταξύ των εικόνων, με όσες εικόνες θέλουμε, με ότι διαστάσεις θέλουμε, και με όποια ταχύτητα εναλλαγής των εικόνων επιλέξουμε. Αλλάξτε τα μώβ links των εικόνων με τις δικές σας εικόνες. Αλλάξτε τις διαστάσεις του slideshow αλλάζοντας τα γαλάζια νούμερα. Αλλάξτε την ταχύτητα εναλλαγής των εικόνων αλλάζοντας το πορτοκαλί νούμερο. Βάλτε το σωστό αριθμό εικόνων που έχει το slideshow σας αντικαθιστώντας το πράσινο νούμερο (step<9).