GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

CAROUSEL SLIDESHOW WITH AUTO MOUSE SCROLLING

SLIDESHOW CAROUSEL
CAROUSEL SLIDESHOW WITH AUTO MOUSE SCROLLING
Αυτό είναι ένα carousel slideshow το οποίο κινείται όταν μετακινήσετε το ποντίκι σας δεξιά ή αριστερά. Το πλάτος του είναι αυτόματο, ενώ το ύψος του μαζί με το εσωτερικό του περίγραμμα είναι 110px και μπορείτε να το αλλάξετε στην πρώτη γραμμή του κώδικα style. Το ύψος μαζί και με τα δύο περιγράμματα (εσωτερικό και εξωτερικό) είναι 120px και μπορείτε να το αλλάξετε στην 7η γραμμή του κώδικα style. Το πλάτος και το ύψος των εικόνων του slideshow είναι 160px και 100px και μπορείτε να το αλλάξετε στη 8η γραμμή του κώδικα style.
Φροντίστε οι εικόνες να έχουν τουλάχιστον την ίδια αναλογία ή τις ίδιες διαστάσεις. Τα γαλάζια links των εικόνων δείχνουν την εικόνα σε όλο της το μέγεθος αν πατήσουμε πάνω στις μικρότερες εικόνες του slideshow. Ενώ τα πράσινα links είναι τα links των μικρότερων εικόνων που περιέχονται στο slideshow. Δείτε το slideshow σε λειτουρία ακριβώς κάτω από εδώ .


<style>
#BloggerSpiceCarouselSlider {height:110px;background:#115599;border:5px solid #00CC00;position:relative;margin:0px;overflow:auto;}
#BloggerSpiceCarouselSlider:before, #BloggerSpiceCarouselSlider:after {content:""; display:block; position:absolute;top:0;bottom:0;left:-4px;width:4px;height:100%;z-index:10;}
#BloggerSpiceCarouselSlider:after {left:auto;right:-4px;}
#BloggerSpiceCarouselSlider .container {position:absolute;top:0;left:0;margin:5px 0 0 5px; width:100%;height:120px;}
#BloggerSpiceCarouselSlider figure {display:block;background:#115599;float:left;width:160px; height:100px;margin:0 5px 0 0;position:relative;overflow:hidden;}
#BloggerSpiceCarouselSlider figcaption {display:block;position:absolute;right:0;bottom:-50px;left:0;background:#000;font:11px Arial;color:#FFF;padding:4px 10px;text-align:left; opacity:0.7;}
#BloggerSpiceCarouselSlider figure img {display:block;border:none;margin:0 0;}
</style>

<div id="BloggerSpiceCarouselSlider">
<div class="container">
<figure><a href="http://i.imgbox.com/x4YtqHsG" title="KERKYRA" target="_blank">
<img alt="KERKYRA" src="http://i.imgur.com/Pq9Dexat.jpg"/></a></figure>
<figure><a href="http://i.imgur.com/kbCkBYe.jpg" title="PAXOI" target="_blank">
<img alt="PAXOI" src="http://i.imgur.com/kbCkBYet.jpg" /></a></figure>
<figure><a href="http://i.imgbox.com/MIiFeUzy" title="LEYKADA" target="_blank">
<img alt="LEYKADA" src="http://i.imgur.com/gCr4ycDt.jpg" /></a></figure>
<figure><a href="http://i.imgbox.com/ZpvJrjg4" title="ITHAKI" target="_blank">
<img alt="ITHAKI" src="http://i.imgur.com/JcRaeRSt.jpg" /></a></figure>
<figure><a href="http://i.imgbox.com/4jvkDVTA" title="KEFALLONIA" target="_blank">
<img alt="KEFALLONIA" src="http://i.imgur.com/XMS6PHst.jpg" /></a></figure>
<figure><a href="http://i.imgbox.com/HwIiXvNX.jpg" title="ZAKYNTHOS" target="_blank">
<img alt="ZAKYNTHOS" src="http://i.imgur.com/I9SFA0st.jpg" /></a></figure>
<figure><a href="http://i.imgur.com/6mZpZ0F.jpg" title="SKOPELOS" target="_blank">
<img alt="SKOPELOS" src="http://i.imgur.com/6mZpZ0Ft.jpg" /></a></figure>
<figure><a href="http://i.imgbox.com/6IruqU66" title="ALONNISOS" target="_blank">
<img alt="ALONNISOS" src="http://i.imgur.com/9GqSG9at.jpg" /></a></figure>
<figure><a href="http://i.imgur.com/W8LjNt5.jpg" title="SKIATHOS" target="_blank">
<img alt="SKIATHOS" src="http://i.imgur.com/W8LjNt5t.jpg" /></a></figure>
<figure><a href="http://i.imgur.com/CaUHw47.jpg" title="SKYROS" target="_blank">
<img alt="SKYROS" src="http://i.imgur.com/CaUHw47t.jpg" /></a></figure>
<figure><a href="http://i.imgbox.com/vZMmzLkI" title="AIDIPSOS" target="_blank">
<img alt="AIDIPSOS" src="http://i.imgur.com/GwVdj0Ut.jpg" /></a></figure>
<figure><a href="http://i.imgur.com/C83SL17.jpg" title="MYKONOS" target="_blank">
<img alt="MYKONOS" src="http://i.imgur.com/C83SL17t.jpg" /></a></figure>
<figure><a href="http://i.imgur.com/YCL3P4v.jpg" title="ASTYPALAIA" target="_blank">
<img alt="ASTYPALAIA" src="http://i.imgur.com/YCL3P4vt.jpg" /></a></figure>
<figure><a href="http://i.imgbox.com/oAmPVZ8O" title="SANTORINI" target="_blank">
<img alt="SANTORINI" src="http://i.imgur.com/KwuI9Z2t.jpg" /></a></figure>
</div></div>

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

<script>
(function($) {
var config = {
itemMargins: 5};
var $thumbnailScroller = $('#BloggerSpiceCarouselSlider'),
$container = $thumbnailScroller.find('.container'),
$item = $container.find('figure'),
item_length = $item.length,
item_width = $item.outerWidth(),
item_margin = config.itemMargins,
total_width = (item_width + item_margin) * item_length,
$window = $(window);
$thumbnailScroller.css('overflow', 'hidden');
$container.css('width', total_width);
$item.each(function(cap) {
if ($(this).children().attr('title')) {
cap = $(this).children().attr('title');
$(this).children().removeAttr('title');
$(this).append('<figcaption>' + cap + '</figcaption>');}}).hover(function() {
$(this).find('figcaption').stop().animate({bottom: 0}, 200);}, function() {
$(this).find('figcaption').stop().animate({bottom: -50}, 200);});
$window.on("resize", function() {
var o_l = $thumbnailScroller.offset().left,
t_w = $thumbnailScroller.width(),
c_w = total_width;
$thumbnailScroller.on("mousemove", function(e) {
if ($(this).width() < $container.width()) {
$container.css('left', -((e.pageX - o_l) * (c_w - t_w) / t_w));}});}).trigger("resize");
})(jQuery);
</script>

2 σχόλια:

  1. kalhspera...wraia douleia tha ithela na mou peis pos stroguleuo tis gonies opos fenete kai sthn dikai sou anartisi? tha ithela mono gia to sugekrimeno diladi na mhn alaxei se olo to blog.

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Βάλε στην τελευταία γραμμή του κώδικα style την εντολή border-radius:5px;

      Διαγραφή

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

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