GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr Delicius DIIGO Start.me NETVIBES feedburner

3D CUBE SLIDESHOW

3d-slideshow
3D CUBE SLIDESHOW
Με τον παρακάτω κώδικα μπορείτε να βάλετε ένα 3D CUBE SLIDESHOW στο blog σας.
Μπορείτε να αλλάξετε αν θέλετε τα μεγέθη των εικόνων αλλά αναλογικά πάντα για να μην έχετε παραμόρφωση. Οι διαστάσεις αλλάζουν στην 2η γραμμή του κώδικα style αλλά και στην 6η γραμμή του κώδικα script εκεί που γράφει dimensions: [640, 400]. Τις εικόνες του συγκεκριμένου slideshow πρέπει να τις βάλετε μέσα στο script αντικαθιστώντας τις δικές μου με τα γαλάζια link. Δείτε το 3D CUBE SLIDESHOW σε λειτουργία ακριβώς κάτω από εδώ .



◄◄ PREVIOUS NEXT ►►

<style>
div.jkcubeslideshow{background: white;display:block;width:640px;height:400px;position: relative; -webkit-perspective:1000px; perspective:1000px;}
div.side1, div.side2 {width:100%;height:100%;position:absolute; -moz-box-sizing:border-box; box-sizing: border-box; backface-visibility:hidden; transition:all 1s ease-in-out;}
div.side1 img, div.side2 img {width:100%;height:auto;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/github-codes/5d17de3549a52b71e0b62be31787b6a8/raw/02a6724eaa21c613caa395e1acfea162e5ad9c0f/3d-cube-slideshow.js"></script>

<script>
var cubeshowvar1
jQuery(function($){
cubeshowvar1 = new jkcubeslideshow({
id: 'cubeshow1',
dimensions: [640, 400],
images: [
['http://i.imgur.com/fiVofHIl.jpg'],
['http://i.imgur.com/rcivwQJl.jpg'],
['http://i.imgur.com/0nyxX2Ll.jpg'],
['http://i.imgur.com/gptb8xnl.jpg'],
['http://i.imgur.com/Pq9Dexal.jpg'],
['http://i.imgur.com/xHwALvDl.jpg'],
['http://i.imgur.com/3Jk6C5nl.jpg'],
['http://i.imgur.com/1l2cZBCl.jpg'],
['http://i.imgur.com/qMMDdhYl.jpg'],
['http://i.imgur.com/tZsqBn7l.jpg']]})})
</script>

<div class="jkcubeslideshow" id="cubeshow1"></div>
<a href="#" onClick="cubeshowvar1.rotatecube('back'); return false" style="background:#FBBB22; border-radius:6px;padding:6px;">◄◄ PREVIOUS</a>

<a href="#" onClick="cubeshowvar1.rotatecube('forward'); return false" style="margin-left:422px; background:#FBBB22;border-radius:6px;padding:6px;">NEXT ►►</a>

5 σχόλια:

  1. Μπορούμε να βάλουμε link , να παραπέμπει σε άλλη σελιδα μόλις κάποιος clickάρει πάνω στην εικόνα?
    Ευχαριστώ πολύ εκ των προτέρων

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Σε αυτό το slideshow οχι. Υπάρχει όμως αυτό που μπορείς. http://the-best-widgets.blogspot.gr/2016/03/slideshow.html

      Διαγραφή
  2. φιλε μου καλε αν μπορεισ μια βοηθεια μικρη .εβαλα το 3d cube slide show στο μπλογκ μου ......δουλευει μια χαρα .....ομως στα κουμπακια δεν μου βγαζει τις λεξεις previw kai next........τι μπορω να κανω γι αυτο?.......σ ευχαριστω.αν θελεις δες το στο http://tapikepsixremoi.blogspot.gr/p/photos_29.html

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Βάλε τον παρακάτω κώδικα με την προσθήκη του χρώματος της γραμματοσειράς των links (previous & next). http://www.codeply.com/go/khtxKodwTa Αν δεν δείξει σε σένα όπως δείχνει στο html viewer τότε άλλαξε το χρώμα των ενεργών συνδέσμων μέσα απο την προσαρμογή του Blogger.

      Διαγραφή

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