Amazing CSS Slideshow- dr-blogger

Νέοι bloggers γεια σας...χωρίς πολλά λόγια, σας δίνω DEMO & DEMO , και σας δίνω το κώδικα που θα βάλετε σαν gadget HTML/JavaScript...Είναι ένα απίθανο slide show που θα αναδείξει τις εικόνες σας, και μπαίνει εύκολα, χωρίς να καθυστερεί το άνοιγμα της σελίδας σας....
Βάλτε απλά σαν gadget τον παρακάτω κώδικα:

<style type='text/css'>

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-stacked-slideshow.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<style>
#cssplayGallery a,
body {behavior:url(cssplay18/trigger.htc)}

#cssplayGallery {position:relative; width:482px; margin:0 auto; height:382px; overflow:hidden;}
#cssplayGallery .cover {width:482px; height:100px; background:url(trans.gif); position:absolute; left:0; top:0; z-index:30;}
#cssplayGallery a {display:block; width:482px; height:302px; position:absolute; outline:0; background-color: 'transparent';
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
#cssplayGallery a.p1 {top:100px; z-index:10;}
#cssplayGallery a.p2 {top:80px; z-index:9;}
#cssplayGallery a.p3 {top:64px; z-index:8;}
#cssplayGallery a.p4 {top:51px; z-index:7;}
#cssplayGallery a.p5 {top:41px; z-index:6;}
#cssplayGallery a.p6 {top:33px; z-index:5;}
#cssplayGallery a.p7 {top:26px; z-index:4;}
#cssplayGallery a.p8 {top:21px; z-index:3;}
#cssplayGallery a.p9 {top:17px; z-index:2;}

#cssplayGallery a.p1 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p2 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p3 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p4 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p5 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p6 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p7 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p8 img {width:100px; padding:0 190px; opacity:0.15; filter: alpha(opacity=10);}
#cssplayGallery a.p9 img {width:80px; padding:0 200px; opacity:0.1; filter: alpha(opacity=10);}

#cssplayGallery a img {display:block; border:0px solid #fff;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
/* IE browsers */
#cssplayGallery a:active {opacity:0;}

#cssplayGallery a.p1:active ~ a.p2 {top:100px; z-index:20;}
#cssplayGallery a.p1:active ~ a.p3 {top:80px; z-index:19;}
#cssplayGallery a.p1:active ~ a.p4 {top:64px; z-index:18;}
#cssplayGallery a.p1:active ~ a.p5 {top:51px; z-index:17;}
#cssplayGallery a.p1:active ~ a.p6 {top:41px; z-index:16;}
#cssplayGallery a.p1:active ~ a.p7 {top:33px; z-index:15;}
#cssplayGallery a.p1:active ~ a.p8 {top:26px; z-index:14;}
#cssplayGallery a.p1:active ~ a.p9 {top:21px; z-index:13;}
#cssplayGallery a.p1:active ~ a.p2 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p1:active ~ a.p3 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p1:active ~ a.p4 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p1:active ~ a.p5 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p1:active ~ a.p6 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p1:active ~ a.p7 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p1:active ~ a.p8 img {width:126px; padding:0 177px; filter: alpha(opacity=20);}
#cssplayGallery a.p1:active ~ a.p9 img {width:100px; padding:0 190px; filter: alpha(opacity=15);}

#cssplayGallery a.p2:active ~ a.p3 {top:100px; z-index:20;}
#cssplayGallery a.p2:active ~ a.p4 {top:80px; z-index:19;}
#cssplayGallery a.p2:active ~ a.p5 {top:64px; z-index:18;}
#cssplayGallery a.p2:active ~ a.p6 {top:51px; z-index:17;}
#cssplayGallery a.p2:active ~ a.p7 {top:41px; z-index:16;}
#cssplayGallery a.p2:active ~ a.p8 {top:33px; z-index:15;}
#cssplayGallery a.p2:active ~ a.p9 {top:26px; z-index:14;}
#cssplayGallery a.p2:active ~ a.p3 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p2:active ~ a.p4 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p2:active ~ a.p5 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p2:active ~ a.p6 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p2:active ~ a.p7 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p2:active ~ a.p8 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p2:active ~ a.p9 img {width:126px; padding:0 177px; filter: alpha(opacity=20);}

#cssplayGallery a.p3:active ~ a.p4 {top:100px; z-index:20;}
#cssplayGallery a.p3:active ~ a.p5 {top:80px; z-index:19;}
#cssplayGallery a.p3:active ~ a.p6 {top:64px; z-index:18;}
#cssplayGallery a.p3:active ~ a.p7 {top:51px; z-index:17;}
#cssplayGallery a.p3:active ~ a.p8 {top:41px; z-index:16;}
#cssplayGallery a.p3:active ~ a.p9 {top:33px; z-index:15;}
#cssplayGallery a.p3:active ~ a.p4 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p3:active ~ a.p5 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p3:active ~ a.p6 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p3:active ~ a.p7 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p3:active ~ a.p8 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p3:active ~ a.p9 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}

#cssplayGallery a.p4:active ~ a.p5 {top:100px; z-index:20;}
#cssplayGallery a.p4:active ~ a.p6 {top:80px; z-index:19;}
#cssplayGallery a.p4:active ~ a.p7 {top:64px; z-index:18;}
#cssplayGallery a.p4:active ~ a.p8 {top:51px; z-index:17;}
#cssplayGallery a.p4:active ~ a.p9 {top:41px; z-index:16;}
#cssplayGallery a.p4:active ~ a.p5 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p4:active ~ a.p6 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p4:active ~ a.p7 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p4:active ~ a.p8 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p4:active ~ a.p9 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}

#cssplayGallery a.p5:active ~ a.p6 {top:100px; z-index:20;}
#cssplayGallery a.p5:active ~ a.p7 {top:80px; z-index:19;}
#cssplayGallery a.p5:active ~ a.p8 {top:64px; z-index:18;}
#cssplayGallery a.p5:active ~ a.p9 {top:51px; z-index:17;}
#cssplayGallery a.p5:active ~ a.p6 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p5:active ~ a.p7 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p5:active ~ a.p8 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p5:active ~ a.p9 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}

#cssplayGallery a.p6:active ~ a.p7 {top:100px; z-index:20;}
#cssplayGallery a.p6:active ~ a.p8 {top:80px; z-index:19;}
#cssplayGallery a.p6:active ~ a.p9 {top:64px; z-index:18;}
#cssplayGallery a.p6:active ~ a.p7 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p6:active ~ a.p8 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p6:active ~ a.p9 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}

#cssplayGallery a.p7:active ~ a.p8 {top:100px; z-index:20;}
#cssplayGallery a.p7:active ~ a.p9 {top:80px; z-index:19;}
#cssplayGallery a.p7:active ~ a.p8 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p7:active ~ a.p9 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}

#cssplayGallery a.p8:active ~ a.p9 {top:100px; z-index:20;}
#cssplayGallery a.p8:active ~ a.p9 img {width:480px; padding:0; filter: alpha(opacity=100);}

#cssplayGallery a.p8:active {top:200px; z-index:13;}

/* non-IE browsers */

#cssplayGallery a:focus {opacity:0;}

#cssplayGallery a.p1:focus ~ a.p2 {top:100px; z-index:20;}
#cssplayGallery a.p1:focus ~ a.p3 {top:80px; z-index:19;}
#cssplayGallery a.p1:focus ~ a.p4 {top:64px; z-index:18;}
#cssplayGallery a.p1:focus ~ a.p5 {top:51px; z-index:17;}
#cssplayGallery a.p1:focus ~ a.p6 {top:41px; z-index:16;}
#cssplayGallery a.p1:focus ~ a.p7 {top:33px; z-index:15;}
#cssplayGallery a.p1:focus ~ a.p8 {top:26px; z-index:14;}
#cssplayGallery a.p1:focus ~ a.p9 {top:21px; z-index:13;}
#cssplayGallery a.p1:focus ~ a.p2 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p1:focus ~ a.p3 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p1:focus ~ a.p4 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p1:focus ~ a.p5 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p1:focus ~ a.p6 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p1:focus ~ a.p7 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p1:focus ~ a.p8 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p1:focus ~ a.p9 img {width:100px; padding:0 190px; opacity:0.15; filter: alpha(opacity=15);}

#cssplayGallery a.p2:focus ~ a.p3 {top:100px; z-index:20;}
#cssplayGallery a.p2:focus ~ a.p4 {top:80px; z-index:19;}
#cssplayGallery a.p2:focus ~ a.p5 {top:64px; z-index:18;}
#cssplayGallery a.p2:focus ~ a.p6 {top:51px; z-index:17;}
#cssplayGallery a.p2:focus ~ a.p7 {top:41px; z-index:16;}
#cssplayGallery a.p2:focus ~ a.p8 {top:33px; z-index:15;}
#cssplayGallery a.p2:focus ~ a.p9 {top:26px; z-index:14;}
#cssplayGallery a.p2:focus ~ a.p3 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p2:focus ~ a.p4 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p2:focus ~ a.p5 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p2:focus ~ a.p6 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p2:focus ~ a.p7 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p2:focus ~ a.p8 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p2:focus ~ a.p9 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}

#cssplayGallery a.p3:focus ~ a.p4 {top:100px; z-index:20;}
#cssplayGallery a.p3:focus ~ a.p5 {top:80px; z-index:19;}
#cssplayGallery a.p3:focus ~ a.p6 {top:64px; z-index:18;}
#cssplayGallery a.p3:focus ~ a.p7 {top:51px; z-index:17;}
#cssplayGallery a.p3:focus ~ a.p8 {top:41px; z-index:16;}
#cssplayGallery a.p3:focus ~ a.p9 {top:33px; z-index:15;}
#cssplayGallery a.p3:focus ~ a.p4 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p3:focus ~ a.p5 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p3:focus ~ a.p6 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p3:focus ~ a.p7 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p3:focus ~ a.p8 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p3:focus ~ a.p9 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}

#cssplayGallery a.p4:focus ~ a.p5 {top:100px; z-index:20;}
#cssplayGallery a.p4:focus ~ a.p6 {top:80px; z-index:19;}
#cssplayGallery a.p4:focus ~ a.p7 {top:64px; z-index:18;}
#cssplayGallery a.p4:focus ~ a.p8 {top:51px; z-index:17;}
#cssplayGallery a.p4:focus ~ a.p9 {top:41px; z-index:16;}
#cssplayGallery a.p4:focus ~ a.p5 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p4:focus ~ a.p6 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p4:focus ~ a.p7 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p4:focus ~ a.p8 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p4:focus ~ a.p9 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}

#cssplayGallery a.p5:focus ~ a.p6 {top:100px; z-index:20;}
#cssplayGallery a.p5:focus ~ a.p7 {top:80px; z-index:19;}
#cssplayGallery a.p5:focus ~ a.p8 {top:64px; z-index:18;}
#cssplayGallery a.p5:focus ~ a.p9 {top:51px; z-index:17;}
#cssplayGallery a.p5:focus ~ a.p6 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p5:focus ~ a.p7 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p5:focus ~ a.p8 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p5:focus ~ a.p9 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}

#cssplayGallery a.p6:focus ~ a.p7 {top:100px; z-index:20;}
#cssplayGallery a.p6:focus ~ a.p8 {top:80px; z-index:19;}
#cssplayGallery a.p6:focus ~ a.p9 {top:64px; z-index:18;}
#cssplayGallery a.p6:focus ~ a.p7 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p6:focus ~ a.p8 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p6:focus ~ a.p9 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}

#cssplayGallery a.p7:focus ~ a.p8 {top:100px; z-index:20;}
#cssplayGallery a.p7:focus ~ a.p9 {top:80px; z-index:19;}
#cssplayGallery a.p7:focus ~ a.p8 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p7:focus ~ a.p9 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}

#cssplayGallery a.p8:focus ~ a.p9 {top:100px; z-index:20;}
#cssplayGallery a.p8:focus ~ a.p9 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}

#cssplayGallery a.p8:focus {top:200px; z-index:13;}</style>

<center>ΤΙΤΛΟΣ ΜΕΝΟΥ</center>

<div id="cssplayGallery">

<div class="cover"></div>

<a class="p1" href="#url" tabindex="1"><img src="JPG" alt="" /></a>

<a class="p2" href="#url" tabindex="2"><img src="JPG" alt="" /></a>

<a class="p3" href="#url" tabindex="3"><img src="JPG" alt="" /></a>

<a class="p4" href="#url" tabindex="4"><img src="JPG" alt="" /></a>

<a class="p5" href="#url" tabindex="5"><img src="JPG" alt="" /></a>

<a class="p6" href="#url" tabindex="6"><img src="JPG" alt="" /></a>

<a class="p7" href="#url" tabindex="7"><img src="JPG" alt="" /></a>

<a class="p8" href="#url" tabindex="8"><img src="JPG" alt="" /></a>

<a class="p9" href="#url" tabindex="9"><img src="JPG" alt="" /></a>

</div>

***απλά βάλτε τις φωτογραφίες σας, όπου βλέπετε "JPG"........

***MH βάλετε περισσότερες εικόνες...

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

***τους κώδικες CSS σας τους έβαλα αναλυτικά, για να μην εξαρτάται από την "εξαφάνιση" τους....

***να ξέρετε οτι ένας κώδικας CSS μπαίνει πάντα ανάμεσα στις λέξεις <style> CSS </style>

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!!!

Πηγή : www.cssplay.co.uk/ thanks to Stu Nicholls

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

6 σχόλια:

Chris είπε...: μπορεις να μου πεις πως να μειωσω τις διαστασεις του slideshow και πως να το κανω να αλλαζει τις φωτο αυτοματα?; 18/12/11, 1:28 π.μ.
pandelees karagiann είπε...: ...chris, είναι πολλές οι παράμετροι που αλλάζουν τις διαστάσεις...αν νομίζεις οτι θα τα καταφέρεις και αν γνωρίζεις λίγο css, στείλε μου email, να σου απαντήσω, για να μη βασανιστούμε και οι 2 εδώ στα σχόλια...(άλλωστε δεν νομίζω οτι ενδιαφέρει και κανέναν άλλον αυτό πρόβλημα)...όσο για το αυτόματο άλλαγμα των φωτογραφιών, νομίζω οτι πρέπει να απευθυνθείς στον κατασκευαστή...; 18/12/11, 1:48 π.μ.
sam είπε...: Φιλε μου το περναω και μου εμφανιζει μονο τον τιτλο.Και γενικως δεν λειτουργει κανενα slider απ'οσα δοκιμασα να περασω.Μπορεις να μου πεις που να εστιασω στο προτυπο μου;; 3/1/12, 12:44 μ.μ.
pandelees karagiann είπε...: ...Απόστολε, ειδα τα blogs σου....στειλε μου email (εκει που λεει "επικοινωνία") για να σε βοηθήσω να φτιάξεις αυτό που έχεις ήδη...αυτό που προσπαθεις να βαλεις απο αυτη την ανάρτηση, δεν σε βολεύει...; 3/1/12, 1:03 μ.μ.
Unknown είπε...: Φφιλε και εμενα δεν μου εμφανιζει τιποτα εκτος τον τιτλο. μπορεις να με βοηθησεις. ευχαριστω προκαταβολικα; 11/3/13, 6:19 μ.μ.
pandelees karagiann είπε...: Παναγιωτη, πως μπορω να βοηθησω? στειλε μου μηνυμα (email) η μηνυμα στο facebook να εχουμε αμεσοτητα...ειδα το πεττας τουρς, και φανταζομαι οτι εκει θελεις να το βαλεις...παντως αν ειναι για το πεττας τουρς καλυτερα να βαλεις ενα slider...στειλε μου μηνυμα, και θα σου βρω κατι αλλο, αν δεν μπορεις αυτο...; 11/3/13, 7:11 μ.μ.