Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




8 Simple Slideshow/Απλή Εναλλαγή Εικόνων

Νέοι bloggers γεια σας !!! Ξέρετε πια ότι έχω ιδιαίτερη αδυναμία σε widgets και gadgets για προβολές εικόνων...σας έχω παρουσιάσει ήδη αρκετούς κώδικες για προβολή εικόνων  !!! Βρήκα λοιπόν σε ένα forum έναν νέο κώδικα που είναι πολύ απλός και ελαφρύς για το blog σας, για ένα slideshow...έχω ήδη ένα DEMO ΕΔΩ, και μπαίνει εύκολα σαν gadget...



Κάντε αντιγραφή - επικόλληση τον παρακάτω κώδικα :

<script type="text/javascript">
var slides = new Array(
{ img:'Temp01a.jpg', alt:'', lnk:'#', cap:'Caption 1' },
{ img:'Temp02a.jpg', alt:'', lnk:'#', cap:'Caption 2' },
{ img:'Temp03a.jpg', alt:'', lnk:'#', cap:'Caption 3' },
{ img:'Temp04a.jpg', alt:'', lnk:'#', cap:'Caption 4' },
{ img:'Temp05a.jpg', alt:'', llnk:'#', cap:'Caption 5' },
{ img:'Temp06a.jpg', alt:'', lnk:'#', cap:'Caption 6' },
{ img:'Temp07a.jpg', alt:'', lnk:'#', cap:'Caption 7' },
{ img:'Temp08a.jpg', alt:'', lnk:'#', cap:'Caption 8' },
{ img:'Temp09a.jpg', alt:'', lnk:'#', cap:'Caption 9' },
{ img:'Temp010a.jpg', alt:'', lnk:'#', cap:'Caption 10' },

);
var i=0;

function cycle1()
{
var banner1 = document.getElementById('adBanner1');
banner1.src = slides[i]['img'];
banner1.alt = slides[i]['alt'];
document.getElementById('adLink1').href = slides[i]['lnk'];
document.getElementById('adCaption1').innerHTML = slides[i]['cap'];
i = (i + 1) % slides.length;
setTimeout('cycle1();', 6000);
}
window.onload = cycle1;
</script>

<div style="text-align:center;">
<a target="_blank"  href="http://www.dr-blogger.com/" id="adLink1" target="_top">
<img src="Temp01.jpg" id="adBanner1" border="0" width="500" height="350" />
</a>
<div id="adCaption1">xxx</div>
</div>

***όπου =>  width="500" height="350" είναι οι διαστάσεις του slidershow
***όπου =>  Temp01a.jpg μπαίνει η Διεύθυνση της κάθε εικόνας
***όπου =>  Caption 1  μπαίνει ο τίτλος της κάθε εικόνας
***όπου=>    lnk:'#'  βάζετε αν θέλετε μια διεύθυνση να ανοίγει ένα link...(ίσως της εικόνας)
τα άλλα αν δεν ξέρετε μην τα πειράξετε
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

8 σχόλια:

Τσάμης Γιώργος είπε...

Παντελή τι διαστάσεις πρέπει να έχουν οι εικόνες που θα βάλουμε??

pandelees karagiann είπε...

...Γιωργο, αναλογα με τις διαστασεις που θα βαλεις στο slide show...αν το κανεις 500x300px οπως αυτο που δίνω, οι εικονες να ειναι μεγαλύτερες η ισες απο 500x300px...αμα ειναι μικρότερες, θα δειχνουν θαμπές...αυτό στο demo είναι 500x300...μπορεις να το κανεις και μικρότερο η μεγαλύτερο...

pandelees karagiann είπε...

...συγγνώμη...500x350 ηθελα να γράψω όπου έβαζα 500x300 στο προηγουμενο σχολιο...

Τσάμης Γιώργος είπε...

Κάτι δεν κάνω σωστά η το πρότυπο μου δεν δέχεται τους κώδικες? Τα κάνω ολα κανονικά και μάλιστα δοκιμαστικά στο http://demobloghtml.blogspot.com/ αλλά στην εφαρμογή δεν λειτουργεί το slide παρα μονο φαίνεται μια μονο φωτο.

Μηπως πρέπει να πειράξουμε και κάτι άλλο εκτός απο τα χρωματισμένα??

pandelees karagiann είπε...

Γιώργο, στειλε μου το κωδικα που έφτιαξες (με μειλ), για να τον δω και να τον διορθωσω....(αυτό το κώδικα που δοκίμασες στο demo blog)

ΓΙΩΡΓΟΣ ΤΣΑΜΗΣ είπε...

Παντελή σε ευχαριστώ εγω και ολοι μας παρα πολύ, οι αναρτήσεις σου και οι συμβουλές σου όχι μόνο μας έχουν κάνει καλύτερους, αλλα (το κυριώτερο) αρχίζουμε να αποκτούμε γνώσεις. Νάσαι πάντα καλά

ΚΕΝΤΡΙΚΗ ΜΑΚΕΔΟΝΙΑ είπε...

ΠΑΝΤΕΛΗ
ΕΒΑΛΑ ΤΟΝ ΚΩΔΙΚΑ ΟΠΩΣ ΠΕΡΙΓΡΑΦΕΙΣ ΑΛΛΑ ΤΟ ΜΟΝΟ ΠΟΥ ΦΑΙΝΕΤΑΙ ΣΤΟ BLOG
ΕΙΝΑΙ XXX?

pandelees karagiann είπε...

ναι φιλε μου...δυστυχως δεν δουλευει σε ολα τα μεγεθη φωτογραφιων...στο demo που στελνω για να το δειτε, δουλευει με μικροτερες...θα προσπαθησω να βρω καποια λυση μολις εχω λιγο χρονο...