GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

SLIDESHOW ΜΕ ΤΙΤΛΟΥΣ ΚΑΙ ΠΕΡΙΓΡΑΦΗ

SLIDESHOW 3
SLIDESHOW ΜΕ ΤΙΤΛΟΥΣ ΚΑΙ ΠΕΡΙΓΡΑΦΗ
Το παρακάτω slideshow ξεκινάει μόνο του αυτόματα και δέχεται τίτλους και περιγραφές για τις εικόνες που περιέχει. Δεν διαθέτει όμως κουμπιά πλοήγησης. Μπορείτε αντικαταστώντας τα μώβ links που βρίσκονται αμέσως πρίν από τα πορτοκαλί links των εικόνων του slideshow να παραπέμψετε όπου θέλετε όσους κλικάρουν τις εικόνες του slideshow. Μπορείτε να αλλάξετε τον χρόνο εναλλαγής των εικόνων αλλάζοντας το timeOut: 5000 που βρίσκετε στη 7η γραμμή του κώδικα. 

Τις διαστάσεις του slideshow τις αλλάζετε στην 11η , 12η και 17η γραμμή του κώδικα αντικαθιστώντας τα γαλάζια νούμερα. Την θέση της μπάρας τίτλων και περιγραφών των εικόνων την αλλάξετε αμμέσως μετά τα πορτοκαλί links εκεί που γράφει <span class="top">. Τις διαστάσεις αυτής της μπάρας τις καθορίζετε στις 4 τελευταίες γραμμές του πρώτου μέρους του κώδικα πρίν το </style>. Τέλος την αδιαφάνεια της μπάρας τίτλου και περιγραφής των εικόνων την αλάζετε εκεί που γράφει filter:'alpha(opacity=70)'; και πιο κάτω στις επόμενες 3 γραμμές που γράφουν -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7

ΔΕΙΤΕ ΕΔΩ ΤΟ SLIDER ΣΕ ΛΕΙΤΟΥΡΓΙΑ ► 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/github-codes/2847cc697e0bd0cf1030a9f032a555a4/raw/f49d2f6997e532c0e7f6d97d916554143362d0b5/slideshow-with-titles.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#btrix_slider3').s3Slider({
timeOut: 5000});});
</script>
<style>
#btrix_slider3 {
width: 960px;
height: 600px;
position: relative;
overflow: hidden;
margin-left: 0;}
#btrix_slider3Content {
width: 960px;
position: absolute;
top: 0;
margin-left: 0;}
.btrix_slider3Image {
float: left;
position: relative;
display: none;  top: 0;}
.btrix_slider3Image span {
position: absolute;
font: 13px Arial;
padding: 0;
background-color: #000000;
color: #ffffff;
filter:'alpha(opacity=70)';
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
text-align:justify;}
.btrix_slider3Image span a {
text-decoration:underline;
color:#FBBB22;}
.clear {clear: both;}
.top {top: 0; left: 0; width: 960px !important; height: 60px;}
.bottom {bottom: 0; left: 0; width: 960px !important; height:60px;}
.left {left: 0; top: 0; width: 120px !important; height: 600px;}
.right {right: 0; bottom: 0; width: 120px !important; height: 600px;}
</style>

<div id="btrix_slider3">
<ul id="btrix_slider3Content">
<li class="btrix_slider3Image">
<a href="http://i.imgur.com/fiVofHI.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/fiVofHIh.jpgwidth: 960px; height: 600px;/><span class="top"><h3>ZAKYNTHOS</h3>ZAKYNTHOS NAYAGIO BEACH</span></a></li>
<li class="btrix_slider3Image">
<a href="http://i.imgur.com/rcivwQJ.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/rcivwQJh.jpgwidth: 960px; height: 600px;/><span class="top">
<h3>LEYKADA</h3>LEYKADA PORTO KATSIKI BEACH</span></a></li>
<li class="btrix_slider3Image">
<a href="http://i.imgur.com/0nyxX2L.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/0nyxX2Lh.jpgwidth: 960px; height: 600px;/><span class="top"><h3>KEFALONIA</h3>KEFALONIA MYRTOS BEACH</span></a></li>
<li class="btrix_slider3Image">
<a href="http://i.imgur.com/gptb8xn.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/gptb8xnh.jpgwidth: 960px; height: 600px;/><span class="top">
<h3>KRITI</h3>KRITI MPALOS BEACH</span></a></li>
<li class="btrix_slider3Image">
<a href="http://i.imgur.com/oSC4D7R.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/oSC4D7Rh.jpgwidth: 960px; height: 600px;/><span class="top"><h3>SKIATHOS</h3>SKIATHOS KOYKOYNARIES BEACH</span></a></li>
<li class="btrix_slider3Image">
<a href="http://i.imgur.com/9GqSG9a.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/9GqSG9ah.jpgwidth: 960px; height: 600px;/><span class="top"><h3>ALONNISOS</h3>ALONNISOS KOKKINOKASTRO BEACH</span></a></li>
<li class="btrix_slider3Image">
<a href="http://i.imgur.com/7X4wjWS.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/7X4wjWSh.jpgwidth: 960px; height: 600px;/><span class="top"><h3>KERKYRA</h3>KERKYRA PONTIKONISI VIEW</span></a></li>
<li class="btrix_slider3Image">
<a href="http://i.imgur.com/kbCkBYe.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/kbCkBYeh.jpgwidth: 960px; height: 600px;/><span class="top">
<h3>PAXOI</h3>PAXOI AERIAL VIEW</span></a></li>
<li class="btrix_slider3Image">
<a href="http://i.imgur.com/XZLp5MA.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/XZLp5MAh.jpg" /><span class="top">
<h3>SAMOS</h3>SAMOS MEGALO SEITANI BEACH</span></a></li>
<li class="btrix_slider3Image">
<a href="http://i.imgur.com/DgCJJQe.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/DgCJJQeh.jpg" /><span class="top">
<h3>SKOPELOS KOLPOS PANORMOU</h3>SKOPELOS KOLPOS PANORMOU</span></a></li>
<div class="clear btrix_slider3Image">
</div>
</ul>
</div>
</div>

Developped By: Boban KariΕ‘ik -> http://www.serie3.info/
CSS Help: MΓ©szΓ‘ros RΓ³bert -> http://www.perspectived.com/

1 σχόλιο:

  1. Ανώνυμος30/10/15 22:45

    είναι φοβερές όλες οι αναρτήσεις σου! μας βοηθάς πάρα πολύ! απλά το φοντο που έχεις πισω κουράζει πολύ τον αναγνώστη και δεν μπορούμε να είμαστε για αρκετή ώρα....βάλε άλλο φοντο και θα έχεις περισσότερες επισκέψεις....φιλικά μια fun!

    ΑπάντησηΔιαγραφή

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

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