[SOLUCIONADO] Problema con Script de galería

[Shelonix]

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:

$(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:

<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 src="js/jquery.easing.1.3.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:

<div class="contenedor">
                <div class="qitem"><a href="#"><img src="images/otros/otro1.jpg" alt="Test 1" title="" width="200" height="200"/></a>
                <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div>
             <div class="qitem"><a href="#"><img src="images/otros/otro2.jpg" alt="Test 1" title="" width="200" height="200"/></a>
                <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div>
             <div class="qitem"><a href="#"><img src="images/otros/otro3.jpg" alt="Test 1" title="" width="200" height="200"/></a>
                <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div>
             <div class="qitem"><a href="#"><img src="images/otros/otro4.jpg" alt="Test 1" title="" width="200" height="200"/></a>
                <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div>
             <div class="qitem"><a href="#"><img src="images/otros/otro5.jpg" alt="Test 1" title="" width="200" height="200"/></a>
                <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div> 
             <div class="qitem"><a href="#"><img src="images/otros/otro6.jpg" alt="Test 1" title="" width="200" height="200"/></a>
                <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div>
             <div class="qitem"><a href="#"><img src="images/otros/otro7.jpg" alt="Test 1" title="" width="200" height="200"/></a>
                <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div>
</div>
 

cualquier ayuda que me den para identificar cual es el error que estoy cometiendo, estaré agradecido

[dAvidcA]

Hola Shelonix, probé tu código exactamente y funcionó. Solamente noté algo: el orden de los scripts SI importa, prueba organizando tu <head> </head> de la siguiente manera:

Código HTML:

<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.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/proceso.js"></script>
 

Aquí una prueba de que funciona: http://jsfiddle.net/dAvidcA/s1mpbr0z/

Saludos.

[Shelonix]

por lo que veo mi problema esta en el orden, ahora cuando decía que tenía un problema de compatibilidad con el jquery.
resulta que la pagina de la galería la estoy llamando con jquery así inicialmente

Código Javascript:

<script type="text/javascript">
            $(document).ready(function() {
            $("#menu").load('html/menu.html');
            $("#contenido").load('html/inicio.html');
            });
        </script>
 

el caso es que estoy usando un index, en él estoy cargando en in div llamado contenido todas las paginas, tengo un boton donde cargo la pagina de la galería y a su vez esa pagina tiene el script

Código Javascript:

<script type="text/javascript">
             $(document).ready(function(){
               $("#show").load('componentes/inicio.html');
                  });
        </script>
 

para llamar la primera galería donde se muestran las imágenes, pasa que colocando el orden que me has indicado (que parece que antes lo puse) ya no carga las paginas que contienen las imágenes que quiero para la galería y no se si sea alguna incompatibilidad entre el jquery 1.11.1 con el 1.3.1 que me anula el segundo código de carga para las paginas pero no el primero que los botones siguen funcionando.

EDITO: corrijo, si me anula ambos, los botones dejan de funcionar también.
¿El problema podría estar en mi servidor local?