Ακόμα ένα σχέδιο για "Slider" για να αναδείξετε τις φωτογραφίες ή τις αναρτήσεις σας.
Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server.
1.4.2.jquery.min.jsΔείτε σχετική ανάρτηση εδώ
Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML.
Και με το Ctrl + F θα κάνετε αναζήτηση για το....
<head>
Μόλις το βρείτε, θα πάτε στην επόμενη γραμμή από το <head>
Θα προσθέσετε το script του Slideshow αφού πρώτα έχετε προσθέσει την διευθύνση του script στο σημείο που λέει "....1.4.2.jquery.min.js....." .
<!--jQuery-Featured-Content-SlideShow-STARTS-http://loneeagle110.blogspot.com-->
<script src='....1.4.2/jquery.min.js....' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
slideShow(3000);
});
function slideShow(speed) {
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
$('ul.slideshow li').css({opacity: 0.0});
$('ul.slideshow li:first').css({opacity: 1.0});
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
var timer = setInterval('gallery()',speed);
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
//]]>
</script>
<style type="text/css">
ul.slideshow{list-style:none; width:600px; height:240px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; }
ul.slideshow li{position:absolute; left:0; right:0}
ul.slideshow li.show{z-index:500}
ul img{width:600px; height:240px; border:none}
#slideshow-caption{width:600px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500}
#slideshow-caption .slideshow-caption-container{padding:5px 10px; z-index:1000}
#slideshow-caption h3{margin:0; padding:0; font-size:16px}
#slideshow-caption p{margin:5px 0 0 0; padding:0}
</style>
<!--jQuery-Featured-Content-SlideShow-STOPS-http://loneeagle110.blogspot.com-->
Επεξήγηση κώδικα:
Τα σημεία που έχω χρωματίσει είναι αυτά που μπορείτε άφοβα να τα αλλάξετε.
Το ul img{width:600px; = το πλάτος του slider και το height:240px; = το ύψος του slider.
Ακριβώς παρακάτω..
#slideshow-caption{width:600px; = το πλάτος της διαφάνειας που εμφανίζεται το κείμενό σας height:70px; = το ύψος της διαφάνειας.
Στα σημεία color:#fff; = το χρώμα του κειμένου background:#000; = το φόντο της διαφάνειας.
Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση.
Εισάγετε τον παρακάτω κώδικα με 2 τρόπους:
1ος. Μπορείτε να εισάγετε τον παρακάτω κώδικα κάτω από την Επικεφαλίδα, πατώντας προσθήκη gadget HTML/JavaScript.
θα το ανοίξετε & θα ρίξετε τον παρακάτω κώδικα.
2ος. Πίνακα ελέγχου σας >>> Σχεδίαση >>> Επεξεργασία HTML.
Βρίσκουμε στο πρότυπο μας την παρακάτω γραμμή του κώδικα: <div id='content-wrapper'> και προσθέτουμε τον παρακάτω κώδικα ακριβώς από πάνω, αφού περάσετε εικόνες συνδέσμους και κείμενα για τις παρουσιάσεις.
<!--jQuery-Featured-Content-SlideShow-STARTS-http://loneeagle110.blogspot.com-->
<ul class="slideshow">
<li><a href="#"><img src="...direct link image 1.jpg..." title="...η περιγραφή σας..." alt="" /></a></li>
<li><a href="#"><img src="...direct link image 2.jpg..." title="...η περιγραφή σας..." alt="" /></a></li>
<li><a href="#"><img src="...direct link image 3.jpg..." title="...η περιγραφή σας..." alt="" /></a></li>
<li><a href="#"><img src="...direct link image 4.jpg..." title="...η περιγραφή σας..." alt="" /></a></li>
<li><a href="#"><img src="...direct link image 5.jpg..." title="...η περιγραφή σας..." alt="" /></a></li>
</ul>
<!--jQuery-Featured-Content-SlideShow-STOPS-http://loneeagle110.blogspot.com-->
Αυτό ήταν, θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε να κάνετε ανανέωση στη σελίδα σας.
Σημείωση:
Καλό είναι οι φωτογραφίες να έχουν παρόμοιο πλάτος και ύψος με το Slider .
Δηλαδή, αν το πλάτος του Slider είναι 600px και το ύψος 240px και οι φωτογραφίες να έχουν τις ίδιες διαστάσεις
Μπορείτε να δείτε εδώ & εδώ μια λίστα από on-line Photo Editors για να επεξεργαστείτε τις φωτογραφίες σας.
Καλησπέρα και πάλη και ισως γήνομαι κουραστικός αλλα ποια είναι η διευθηνση του script. εγω π.χ έβαλα την διευθηνση που το ανέβασα είναι ομωs αυτο;
ΑπάντησηΔιαγραφή@andreasΚαλή σου μέρα.
ΑπάντησηΔιαγραφήΗ διεύθυνση του script είναι αυτή.
Αν το ανέβασες ΕΣΥ κάπου αλλού, θα πάρεις το direct link του hoster όπου το 'χεις ανεβάσει & θα το προσθέσεις στο σημείο [co="red"]....1.4.2/jquery.min.js....[/co] και θα σαι ΟΚ.
Η άλλη λύση είναι να το περάσεις μέσα στο blogger (στο html) & να χεις το κεφάλι σου ήσυχο.
Καλή επιτυχία!
ΚΑΛΗΣΠΕΡΑ ΜΟΥ ΒΓΑΖΕΙ ΚΑΤΙ ΤΡΕΛΑ ΟΤΙ ΦΟΡΤΟΝΟΝΤΕ ΣΕ ΑΛΛΗ ΣΕΛΙΔΑ Η ΣΕΛΙΔΑ ΔΕΝ ΒΡΕΘΗΚΕ ΚΑΝΤΕ ΑΝΑΝΕΩΣΗ ΤΗΣ ΣΕΛΙΔΑΣ ΣΑς ΚΑΙ ΞΑΝΑΠΡΩΣΠΑΘΗΣΤΕ ΠΑΛΗ ΚΑΙ ΕΠΕΙΔΗ ΑΥΤΑ ΕΙΝΑΙ ΨΙΛΑ ΓΡΑΜΜΑΤΑ ΓΙΑ ΜΕΝΑ ΤΟΥ ΕΙΠΑ ΚΑΙ ΕΓΩ ΤΟ ΑΝΤΕ ΓΕΙΑ ΚΑΙ ΥΣΗΧΑΣΑ ΕΥΧΑΡΗΣΤΩ ΠΑΝΤΩΣ ΠΑΜΕ ΓΙΑ ΑΛΛΑ!!!!
ΑπάντησηΔιαγραφή@andreasΣου λεω με σιγουριά, δεν έχεις βάλει σωστά τους συνδέσμους που πρέπει, γι αυτό σου βγαζει αυτα τα μηνυματα.
ΑπάντησηΔιαγραφήΚατά τ' άλλα δουλεύει μια χαρά!
Η απόφαση... δική σου ""πάμε γι' άλλα""!!!