3D CUBE 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://dl.dropboxusercontent.com/s/i65uiit5n70qwpv/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>