Νέοι 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'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Κάντε αντιγραφή - επικόλληση τον παρακάτω κώδικα :
<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'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
8 σχόλια:
Παντελή τι διαστάσεις πρέπει να έχουν οι εικόνες που θα βάλουμε??
...Γιωργο, αναλογα με τις διαστασεις που θα βαλεις στο slide show...αν το κανεις 500x300px οπως αυτο που δίνω, οι εικονες να ειναι μεγαλύτερες η ισες απο 500x300px...αμα ειναι μικρότερες, θα δειχνουν θαμπές...αυτό στο demo είναι 500x300...μπορεις να το κανεις και μικρότερο η μεγαλύτερο...
...συγγνώμη...500x350 ηθελα να γράψω όπου έβαζα 500x300 στο προηγουμενο σχολιο...
Κάτι δεν κάνω σωστά η το πρότυπο μου δεν δέχεται τους κώδικες? Τα κάνω ολα κανονικά και μάλιστα δοκιμαστικά στο http://demobloghtml.blogspot.com/ αλλά στην εφαρμογή δεν λειτουργεί το slide παρα μονο φαίνεται μια μονο φωτο.
Μηπως πρέπει να πειράξουμε και κάτι άλλο εκτός απο τα χρωματισμένα??
Γιώργο, στειλε μου το κωδικα που έφτιαξες (με μειλ), για να τον δω και να τον διορθωσω....(αυτό το κώδικα που δοκίμασες στο demo blog)
Παντελή σε ευχαριστώ εγω και ολοι μας παρα πολύ, οι αναρτήσεις σου και οι συμβουλές σου όχι μόνο μας έχουν κάνει καλύτερους, αλλα (το κυριώτερο) αρχίζουμε να αποκτούμε γνώσεις. Νάσαι πάντα καλά
ΠΑΝΤΕΛΗ
ΕΒΑΛΑ ΤΟΝ ΚΩΔΙΚΑ ΟΠΩΣ ΠΕΡΙΓΡΑΦΕΙΣ ΑΛΛΑ ΤΟ ΜΟΝΟ ΠΟΥ ΦΑΙΝΕΤΑΙ ΣΤΟ BLOG
ΕΙΝΑΙ XXX?
ναι φιλε μου...δυστυχως δεν δουλευει σε ολα τα μεγεθη φωτογραφιων...στο demo που στελνω για να το δειτε, δουλευει με μικροτερες...θα προσπαθησω να βρω καποια λυση μολις εχω λιγο χρονο...
Δημοσίευση σχολίου