Hola gente, me he encontrado este script [URL="http://www.ajaxshake.com/es/JS/2410381/crear-un-efecto-sliding-door-con-css-y-jquery-sliding-door.html"]sliding Door[/URL] que me ha gustado y quería implementarlo en mi web, la parte buena es que lso estilos funcionan
la parte mala es que el script no está funcionando y no estoy seguro de si sea algún problema de compatibilidad entre el jquery-1.11.1.min.js que uso en mi pagina y el archivo de jquery-1.3.1.min.js
el caso es que lo único que hice de cambios fue en los estilos para usar imagenes de 200 x 200 en lugar de 164 (si no mal recuerdo) que usa en el ejemplo
este es el script que me debe hacer el efecto de sliding door
Código Javascript
:
Ver original$(document).ready(function() {
//Custom settings
var style_in = 'easeOutBounce';
var style_out = 'jswing';
var speed_in = 1000;
var speed_out = 300;
//Calculation for corners
var neg = Math.round($('.qitem').width() / 2) * (-1);
var pos = neg * (-1);
var out = pos * 2;
$('.qitem').each(function () {
url = $(this).find('a').attr('href');
img = $(this).find('img').attr('src');
alt = $(this).find('img').attr('img');
$('img', this).remove();
$(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
$(this).children('div').css('background-image','url('+ img + ')');
$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});
$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});
$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});
$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});
}).hover(function () {
$(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});
},
function () {
$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});
}).click (function () {
window.location = $(this).find('a').attr('href');
});
});
aqui pongo como está el head de la pagina donde tengo el script, no se si el orden tenga algo que ver, como tampoco se si las versiones de jquery me esten jugando en contra
Código HTML:
Ver original<link rel="shortcut icon" href="img/logo.ico"> <link rel="stylesheet" href="css/catalogo.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/galery.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/proceso.js"></script>
y finalmente como estoy haciendo la galeria (son varias paginas que hago un llamado con jquery, así que son varias paginas iguales pero para mostrar diferentes tipos de imagenes)
Código HTML:
Ver original <div class="qitem"><a href="#"><img src="images/otros/otro1.jpg" alt="Test 1" title="" width="200" height="200"/></a> <div class="qitem"><a href="#"><img src="images/otros/otro2.jpg" alt="Test 1" title="" width="200" height="200"/></a> <div class="qitem"><a href="#"><img src="images/otros/otro3.jpg" alt="Test 1" title="" width="200" height="200"/></a> <div class="qitem"><a href="#"><img src="images/otros/otro4.jpg" alt="Test 1" title="" width="200" height="200"/></a> <div class="qitem"><a href="#"><img src="images/otros/otro5.jpg" alt="Test 1" title="" width="200" height="200"/></a> <div class="qitem"><a href="#"><img src="images/otros/otro6.jpg" alt="Test 1" title="" width="200" height="200"/></a> <div class="qitem"><a href="#"><img src="images/otros/otro7.jpg" alt="Test 1" title="" width="200" height="200"/></a>
cualquier ayuda que me den para identificar cual es el error que estoy cometiendo, estaré agradecido