13 Ιουλίου 2010



18 Jquery Slideshow

Με ρώτησε πρίν λίγες ημέρες ένας φίλος πώς γίνεται να βάλουμε Slideshow στο blog μας, γιατί το είδε σε κάποια ιστολόγια και του άρεσε. Του είπα πως είναι πονοκέφαλος, μα υποσχέθηκα να κάνω ανάρτηση πάνω σ' αυτό.

Έψαξα και βρήκα ανάμεσα σε πολλές αναρτήσεις, μια που προτίμησα, γιατί μου άρεσε πιο πολύ, και την μετάφρασα για όποιον δεν τον βοηθάνε τα Αγγλικά του. Η σελίδα αυτή, έχει πάρα πολλές επίσης αναρτήσεις, για ότι ακόμη φανταστείτε, και για τους προχωρημένους σε θέματα HTML και Αγγλικά θα είναι αρκετά ενδιαφέρουσα. Θα σας την πώ στο τέλος της ανάρτησης, μαζί με τα σχετικά Link. Όσοι τα καταφέρνετε μόνοι σας, εννοείται ότι μπορείτε να διαβάσετε απ' ευθείας την αυθεντική Αγγλική ανάρτηση.

Πηγή image: bloggertipandtrick.net

Στο tutorial αυτό, θα δείτε πως να βάλετε slideshow που αλάζει μόνο του αυτόματα, για να προβάλετε κάποιες παλιότερες αγαπημένες σας αναρτήσεις στους αναγνώστες σας. Αυτό το slideshow μπορείτε πολύ εύκολα να το κάνετε setup καθώς και εύκολα να επεξεργαστείτε το "width" και το "height" του, ώστε να ταιριάξει στο δικό σας template.
Μπορείτε επίσης να αυξομειώσετε την ταχύτητα εναλαγής εικόνων στο slideshow πολύ εύκολα.
Στο σημερινό παράδειγμα, χρησιμοποιούνται σαν μεταβλητές για το "width" τα 550px και για το "height" τα 200px. Μπορείτε πρίν αρχίσετε να το εγκαταστήσετε, να δείτε το DEMO αυτού του widget που έφτιαξε ο φίλος προγραματιστής για εμάς.

1. Πηγαίνετε στο --> Σχεδίαση- -> και κατόπιν στο Επεξεργασία HTML

2. Κάντε Scroll down και βρείτε το </head> tag .

3. Αντιγράψτε τον παρακάτω κώδικα και επικολήστε τον αμέσως πρίν (απο πάνω) απο το </head> tag


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);

//]]>
</script>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>


NOTE : Για να αυξομειώσετε την ταχύτητα του slideshow, αυξομειώστε την τιμή στο 4000.

4. Αποθηκεύστε το πρότυπό σας.

5. Τώρα πηγαίνετε Σχεδίαση--> κάντε click στο "προσθήκη gadget".

6. Επιλέξτε "html/java script" επικολήστε τον επόμενο κώδικα και πατήστε αποθήκευση.


<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://3.bp.blogspot.com/_4HKUHirY_2U/S9aKt3KHrsI/AAAAAAAAA-w/I2U4SlmRPss/s1600/Crysis-11.jpg" />
<span>Crysis : Download Full Version</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://1.bp.blogspot.com/_4HKUHirY_2U/S9aKuMsQ8wI/AAAAAAAAA-4/-cMpslEWrDI/halo-11.jpg" />
<span>Halo 3 : Play Game Online</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtHKBCTI/AAAAAAAAA-g/mzOzqFjF2FQ/avatar-11.jpg" />
<span>Avatar : Watch Movie Now !!!</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtosfYNI/AAAAAAAAA-o/GTCV0pnicVk/s1600/call+of+duty-11.jpg" />
<span>Call Of Duty 4 : Get Here</span></a>
</li>

</ul>
</div>

<div class='clear'></div>

Δείτε το πώς φαίνεται στο blog σας, και κάντε μετά τις δικές σας αλαγές.
Αντικαταστήστε τα παρακάτω, σε κάθε Section:
Α) YOUR-LINK-HERE με το link της ανάρτησης που θέλετε να διαφημίσετε
Β) Το link απο τα images.
Γ) Τις μεταβλητές πλάτους και ύψους (width:550px;height:200px;)
Δ) Το κείμενο-περιγραφή, που θα προβάλεται σε κάθε αλαγή εικόνας.

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

Αυτό ήταν όλο, και ελπίζω να μην σας δυσκολέψει όσους θα το εγκαταστήσετε.

Πηγή Τutorial: bloggertipandtrick.net


"Γειά σου, Εάν βρέθηκες για πρώτη φορά στο Blog μου, και εάν σε ενδιαφέρουν οι αναρτήσεις μου, μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνοντας εγγραφή στο Newsletter του blog μου, να λαβαίνεις απ ευθείας κάθε μου ανάρτηση στο email σου. Είσαι Twitter user; τότε μπορείς επίσης να με κάνεις Follow στο Twitter. Σε ευχαριστώ που με διαβάζεις."


Οι Σπόνσορες του Blog




Print this post



Related Posts :



18 σχόλια:

zoyzoy είπε... Best Blogger Tips

Γειά σου Νίκο.
Δεν ξέρω γιατί δεν δουλεύει το Demo ίσως να φταίει το p/c μου γιατί μου κάνει κόλπα τελευταία.
Γνωρίζεις πως μπορούμε να βάλουμε διαφάνειες μέσα σε ανάρτηση με φωτό.Εχει κάποιο πρόγραμμα το Γκούκλης όμως δεν φορτώνει φωτό με μεγάλη ανάλυση!
Αν έχεις κανένα τρόπο βάλε σχετική ανάρτηση.Βάζω πολλές φωτό και πιστεύω ότι κουράζουν!
Καλή σου μέρα!!


pan de lees είπε... Best Blogger Tips

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


Κουβανός είπε... Best Blogger Tips

Σε ευχαριστώ πάρα πολύ φίλε μου Νίκο....!!!
Ελπίζω να τα καταφέρω......είσαι και ο πρώτος!!!
Respect!


Κουβανός είπε... Best Blogger Tips

Τέλειο φίλε μου Νίκο...το έκανα μια χαρά και δείχνει πολύ ωραίο...το μόνο πρόβλημα που υπάρχει είναι ότι εμφανίζει μέχρι τρείς slide εικόνες....τις άλλες δεν μου τις βγάζει..???


Ανώνυμος είπε... Best Blogger Tips

Καλησπέρα σας. Ο κώδικας όπως τον δίνετε δεν δουλεύει ούτε σε mozilla ούτε se ΙΕ. Βέβαια το κατάφερα χρησιμοποιώντας το demo και αφαιρώντας τα στοιχεία που δεν ήθελα. Έτσι στο www.padelis.gr υπάρχει το slideshow καθώς και η ανάρτηση σας


O Φουρνιωτης είπε... Best Blogger Tips

Με έσωσες το έψαχνα καιρό αλλά όσα και αν δοκίμασα δεν λειτουργούσε κανένα ευχαριστώ Φίλε
Καλημέρα


AATON είπε... Best Blogger Tips

Σημασία έχει πως τα καταφέρατε όλοι στο τέλος, με τον άλφα η τον βήτα τρόπο :))


Ὁ πάροικος είπε... Best Blogger Tips

ΑΑΤΟΝ, ΜΗΠΩΣ ΜΠΟΡΟΥΣΕΣ ΝΑ ΜΟΥ ΣΤΕΙΛΗΣ ΣΤΟ MAIL ΤΟΝ ΤΡΟΠΟΝ ΜΕ ΤΟΝ ΟΠΟΙΟΝ ΚΑΝΕΙΣ ΣΤΗΝ ΠΙΟ ΠΑΝΩ ΑΝΑΡΤΗΣΗ ΣΟΥ ΤΗΝ ΛΕΞΗ DEMO ΝΑ ΑΝΑΒΟΣΒΥΝΗ; ΜΕ ΕΝΔΙΑΦΕΡΕΙ. ΕΑΝ ΕΧΕΙΣ ΧΡΟΝΟ ΚΑΙ ΘΕΛΕΙΣ ΜΟΥ ΑΠΑΝΤΑΣ.


Ὁ πάροικος είπε... Best Blogger Tips

Α, ΞΕΧΑΣΑ, ΤΟ ΜΑΙL: contratonewworldorder (ΕΙΝΑΙ ΣΤΟ GMAIL). KAI ΕΥΧΑΡΙΣΤΩ ΕΚ ΤΩΝ ΠΡΟΤΕΡΩΝ.


Ὁ πάροικος είπε... Best Blogger Tips

Α, ΞΕΧΑΣΑ, ΜΟΛΙΣ ΤΩΡΑ, 08.07΄ ΤΟ ΠΡΩΪ, ΤΕΛΕΙΩΣΑ ΤΗΝ ΑΝΑΓΝΩΣΗ ΚΑΙ ΤΩΝ 210 ΑΝΑΡΤΗΣΕΩΝ ΣΟΥ ''TIPS AND TRICKS'' ΚΑΙ ΠΑΩ ΓΙΑ ΥΠΝΟ ΓΙΑΤΙ..... ΑΓΡΥΠΝΙΑ ΕΚΑΝΑ ΣΤΟ ΤΕΛΟΣ, ΜΕ ΣΕΝΑ ΠΟΥ ΕΜΠΛΕΞΑ.


Ὁ πάροικος είπε... Best Blogger Tips

Α, ΚΑΙ ΚΑΤΙ ΤΕΛΕΥΤΑΙΟ. ΕΠΕΙΔΗ ΣΤΟ MAIL ΠΟΥ ΜΟΥ ΕΣΤΕΙΛΕΣ ΜΟΥ ΓΡΑΦΕΙΣ ΠΩΣ ΤΙΣ ΚΑΙΝΟΥΡΙΕΣ ΣΟΥ ΑΝΑΡΤΗΣΕΙΣ ΤΙΣ ΠΕΡΝΑΣ ΜΕ ΤΟ ΧΕΡΙ ΚΑΘΕ ΤΟΣΟ ΣΤΟ ''TIPS AND TRICKS'', ΑΝ ΜΕ ΘΥΜΗΘΗΣ ΤΟΤΕ ΠΟΥ ΘΑ ΠΕΡΝΑΣ ΤΙΣ ΝΕΕΣ ΣΟΥ ΑΝΑΡΤΗΣΕΙΣ, ΣΤΕΙΛΕ ΜΟΥ ΕΝΑ ΜΑIL (AN MΠΟΡΗΣ) ΝΑ ''ΞΕΣΤΡΑΒΩΘΩ'' ΚΑΙ ΠΑΛΙ.


AATON είπε... Best Blogger Tips

Βάλε αριστερά και δεξιά απο την λέξη (στο παράδειγμά μου είναι η λέξη DEMO) τις εντολές (blink και /blink) που βλέπεις.

<blink>DEMO</blink>


Ανώνυμος είπε... Best Blogger Tips

Τέλειο φίλε μου Νίκο...το μόνο πρόβλημα που υπάρχει είναι ότι εμφανίζει μέχρι τρείς slide εικόνες....τις άλλες δεν μου τις βγάζει ?


gaidarakos είπε... Best Blogger Tips

το έβαλα και μετά από 3 μέρες μου έβγαλε όλες τις αναρτήσεις μαύρες. Πήγα να το ξαναβάλω και συνεχίζει με το ίδιο πρόβλημα


nellos siakavaras είπε... Best Blogger Tips

Καλησπέρα έχω βάλει το Slideshow στο blog http://atromitos-news.blogspot.gr/ και δουλεύει μια χαρά θα ήθελα να μάθω αν μπορώ να το μετακινήσω και να το πάω στο κέντρο χωρίς να αλλάξω τις μεταβλητές


AATON είπε... Best Blogger Tips

Δοκίμασε αν θέλεις, χωρίς να είναι σίγουρο 100%, στο σημείο:
height: 200px;
position: relative;
overflow: hidden;

άλλαξε τη λέξη relative, και κάντην center, δηλαδή:
height: 200px;
position: center;
overflow: hidden;

και κάνε προεπισκόπιση. Αν δεν λειτουργεί, δεν ξέρω τι άλλο να κάνεις, γιατί δεν βλέπω τον κώδικά σου όπως εσυ.
Αν είναι οκ, πάτα αποθήκευση απλά.


permisospress είπε... Best Blogger Tips

ΣΥΓΧΑΡΗΤΗΡΙΑ ΠΟΛΥ ΩΡΑΙΟ ΤΟ ΣΛΑΙΝΤ ΑΛΛΑ ΓΙΑΤΙ ΔΕ ΜΟΥ ΔΟΥΛΕΥΟΥΝ ΤΑ ΛΙΝΚ ΟΤΑΝ ΠΑΤΑΩ ΠΑΝΩ?


panagiotis aigio είπε... Best Blogger Tips

mou vgazei auto ti na kano;
More than one widget was found with id: HTML13. Widget IDs should be unique.


Δημοσίευση σχολίου

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.

Next Next Next