Tech Time: JavaScript Image Slider

TRANSLATUM

Μία πολύ χρήσιμη online εφαρμογή είναι
το Translatum το οποίο μας βοηθά να μεταφράσουμε λέξεις και κείμενα μέσα από πάρα πολλά λεξικά!Δεν θέλει εγκατάσταση απλά πατήστε στην εικόνα για να μεταφερθείτε στην ιστοσελίδα του Translatum, επιλέξτε

ότι σας ενδιαφέρει και πατήστε Μετάφραση!

Δευτέρα 2 Σεπτεμβρίου 2013

JavaScript Image Slider

Φίλες και φίλοι γεια σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ λειτουργικό slider
για τα blog μας!Είναι πολύ εύκολο στην εγκατάσταση του αλλά και στις ρυθμίσεις που
πρέπει να γίνουν για την λειτουργία του όπως εμείς την θέλουμε!!Μπορείτε να παρουσιάσετε
δημοφιλείς αναρτήσεις σας, φωτογραφίες, διευθύνσεις που θέλετε να επισκεφτούν οι αναγνώστες
σας κτλ!

Για να το εγκαταστήσετε

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript

και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->
........................................................................................................................................

<style type="text/css"> /* JavaScript Image Slider By SafeTricks.Net/ */ #mcis { display: none; } #sliderFrame { position: relative; width: 500px; margin: 0 auto; border:5px solid #000; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(https://lh4.googleusercontent.com/-PaZmF2DqE1I/UeukDrceUkI/AAAAAAAADGA/
PeEmTauoA9I/s109/slider-ribbon.png) no-repeat;
z-index: 7; } #slider { width: 500px; height: 218px; background: #fff url(https://lh6.googleusercontent.com/-dUlRL_1uvb8/UeukrC4KLdI/AAAAAAAADGI
/BPMUH-Ky3PM/s50/load.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999; } #slider img { position: absolute; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg { background-color: black; } div.mc-caption { font: bold 14px/20px Arial; color: #EEE; z-index: 4; padding: 10px 0; text-align: center; } div.mc-caption a { color: #FB0; } div.mc-caption a:hover{ color: #DA0; } div.navBulletsWrapper { top: 250px; left: 190px; width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(https://lh4.googleusercontent.com/-5lXfFwjn3Zc/Ueuk9-
d55YI/AAAAAAAADGQ/f-BPiMxCK9M/s22/slider-bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; margin-right: 11px; _position: relative; } div.navBulletsWrapper div.active { background-position: 0 -11px; } #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform:
translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } </style> <script src="https://od.lk/s/MTBfMzUwNjM0MDdf/0B_1mqJd2tC8qLXpKRHhzd2RXTlU.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div> <div id="slider">
<a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ"
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ"
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ"
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ"
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ"
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a> </div></div><br/><br/><br/>
.................................................................................................
ΑΛΛΑΓΕΣ

width: 500px; Εάν αυξήσουμε το 500 μεγαλώνει το πλάτος του slider,αν το μειώσουμε μικραίνει height: 218px; και εάν αυξήσουμε το 218 αυξάνεται το ύψος του slider και το αντίστροφο αν
μειώσουμε το 218!ΠΡΟΣΟΧΗ οι φωτογραφίες μας πρέπει να είναι στο ίδιο μέγεθος όπως το slider!

ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ Εδώ μπαίνει το λινκ της διεύθυνση μας!

ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ Εδώ μπαίνει η διεύθυνση της φώτο που θα φαίνεται!

ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ Εδώ γράφουμε τι θέλουμε να φαίνεται!

Τα δύσκολα τελείωσαν!!

Εάν θέλετε να προσθέσετε και άλλες αναρτήσεις τότε πριν το </div> στο τελος του κώδικα
προσθέστε επιπλέον

<a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ"><img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ"
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a>

Εάν αυξήσετε το μέγεθος του slider τότε πρέπει και να πειράξετε και το

top: 250px; left: 190px; είναι η θέση των σφαιρών(Bullets)που πρέπει να είναι στο κέντρο
οπότε θα πειράξετε το 250 και το 190 για να τις κεντράρετε!

Όποιος δεν θέλει το whats hot όπως θα δείτε στο DEMO αφαιρέστε από τον κώδικα αυτό..

#ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(https://lh4.googleusercontent.com/-PaZmF2DqE1I/UeukDrceUkI/AAAAAAAADGA/
PeEmTauoA9I/s109/slider-ribbon.png) no-repeat;
z-index: 7;

Αυτά ήταν όλα πατήστε Αποθήκευση και είστε έτοιμοι!!

Καλή επιτυχία!!!!

Πηγή κώδικα
thanks to safetricks.net

Demo στο οποίο έχω κάνει όλες τις αλλαγές που περιέγραψα πιο πάνω μπορείτε να
δείτε εδώ στο Tech Time στην αρχική του σελίδα, και ατόφιο το slider
όπως είναι στον κώδικα
μπορείτε να το δείτε ΕΔΩ

Edit by