galeria html + JS

jmm87 · #1 (**permalink**) 08/01/2013, 07:44

hola buen dia. presento mi problema. tengo la siguiente galeria en html:

Código HTML:

 <div class="pad">
							<a href="#close" class="close"><span></span></a>
								<div class="col1">
									<div class="gallery_big_img">
										<img src="images/banquetas/Sin título-1.png" alt="" class="img1" id="active">
										<img src="images/banquetas/Sin título-2.png" alt="" class="img2">
										<img src="images/banquetas/Sin título-3.png" alt="" class="img3">
										
									</div>
								</div>
								<div class="col1 pad_left1">
									<h2>Banquetas</h2>
									<div id="caption">
										<ul>
											<li class="img1">
												<p class="pad_bot1"><strong>Banqueta 1</strong><br>
														Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta .</p>
												<p>Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta .</p>
											</li>
											<li class="img2">
												<p class="pad_bot1"><strong>Banqueta 2</strong><br>
														Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta .</p>
												<p>Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta .</p>
											</li>
											<li class="img3">
												<p class="pad_bot1"><strong>Banqueta 3</strong><br>
														Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta .</p>
												<p>Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta Banqueta .</p>
											</li>
											
										</ul>
									</div>
									<div class="relative">
										<div id="gallery1">
											<ul>
												<li><a href="#img1"><img src="images/banquetas/Sin título-1.png" alt=""></a></li>
												<li><a href="#img2"><img src="images/banquetas/Sin título-2.png" alt=""></a></li>
												<li><a href="#img3"><img src="images/banquetas/Sin título-3.png" alt=""></a></li>
												<li><a href="#img4"><img src="images/banquetas/Sin título-4.png" alt=""></a></li>
												<li><a href="#img5"><img src="images/banquetas/Sin título-5.png" alt=""></a></li>
												<li><a href="#img6"><img src="images/banquetas/Sin título-6.png" alt=""></a></li>
												<li><a href="#img7"><img src="images/banquetas/Sin título-7.png" alt=""></a></li>
												<li><a href="#img8"><img src="images/banquetas/Sin título-8.png" alt=""></a></li>
											</ul>
										</div>
										<a href="#" class="prev"><span></span></a>
										<a href="#" class="next"><span></span></a>
									</div>
								</div>
						</div>

ese codigo esta dentro de un html que es el index
ese html llama a un script.js que es el siguiente:

Código Javascript:

Ver original$(document).ready(function() {
    // hover
    
    $('footer > a').hover(function(){
        $(this).stop().animate({color:'#4d4d4d'})                        
    }, function(){
        $(this).stop().animate({color:'#ad2f00'})                        
    })
    
    $('.link1').each(function(){
        $(this).prepend('<span></span>')
        var col=$(this).css('color')
        $(this).find('span').css({background:col})
    })
    
    $('.list1 a').each(function(){
        $(this).prepend('<span></span>')                        
    })
    
    $('.link1, .list1 a').hover(function(){
        $(this).find('span').css({opacity:1, width:0}).stop().animate({width:'100%'})
    }, function(){
        $(this).find('span').stop().animate({opacity:0})
    })
    
    $('.close span').css({opacity:0})
    
    $('.close').hover(function(){
        $(this).find('span').stop().animate({opacity:1})                      
    }, function(){
        $(this).find('span').stop().animate({opacity:0})                      
    })
    
    $('#icons .img_act').css({opacity:0})
    
    $('#icons a').hover(function(){
        $(this).find('.img_act').stop().animate({opacity:1})                      
    }, function(){
        $(this).find('.img_act').stop().animate({opacity:0})                      
    })
    
    // gallery
    
    $("#gallery1").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            mouseWheel: true,
            visible: 3,
            speed: 600,
            easing: 'easeOutCirc'
    });
    
    $('.prev span, .next span').css({opacity:0})
    
    $('.prev, .next').hover(function(){
        $(this).find('span').stop().animate({opacity:1})                         
    }, function(){
        $(this).find('span').stop().animate({opacity:0})                         
    })
    
    var Img='.'+$(".gallery_big_img img#active").attr('class')
    $(".gallery_big_img img").css({opacity:0});
    $("#caption li").css({opacity:0, display:'none'});
    $(".gallery_big_img img#active").css({opacity:1});
    $("#caption li"+Img).css({opacity:1, display:'block'});
    $("#caption li"+Img).css({opacity:'none'});
    $("#gallery1 a").click(function(){
        var ImgId = '.'+$(this).attr("href").slice(1);
        if (ImgId!=Img) {
             $(Img).stop().animate({opacity:0}, 600, function(){$(this).css({display:'none'})})
             $(Img).attr({id:''});
             $(ImgId).css({display:'block'}).stop().animate({opacity:1}, 600, function(){$(this).css({opacity:'none'})});
             $(ImgId).attr({id:'active'})
        }
        Img=ImgId;
      return false;
   })
    
    $('.submenu_1 span').css({opacity:0})
    
    $('.submenu_1 li').hover(function(){
        $(this).find('span').stop().animate({opacity:1})                              
    }, function(){
        $(this).find('span').stop().animate({opacity:0})                              
    })
    
    $('ul#menu').superfish({
      delay:       600,
      animation:   {height:'show'},
      speed:       600,
      autoArrows:  false,
      dropShadows: false
    });
    
    $('#content > ul > li').each(function(){
        $(this).data({height:$(this).height()})
        $(this).css({top:$(this).data('height')/2})
    })
    
 });
$(window).load(function() { 
    
    var m_top=30;
    h_cont=340;
    // scroll
    $('.scroll').cScroll({
        duration:700,
        step:75,
        trackCl:'track',
        shuttleCl:'shuttle'
    })  
    
    $('#bgStretch').bgStretch({
            align:'leftBottom',
            navs:$('#bg_pagination').navs({
                hoverIn:function(li){
                    $('span',li).stop().animate({opacity:1})
                    $('a',li).stop().animate({color:'#fff'})
                },
                hoverOut:function(li){
                    $('span',li).stop().animate({opacity:0})
                    $('a',li).stop().animate({color:'#ad2f00'})
                }   
            })
    }).sImg({
            spinner:$('.spinner').css({opacity:.7}).hide()
    })
    
    
    $('#bg_pagination').navs(0)
    
    //content switch
    var content=$('#content'),
        nav=$('.menu');
    nav.navs({
        useHash:true,
        hoverIn:function(li){
            $('> a',li).stop().animate({color:'#ad2f00'})
        },
        hoverOut:function(li){
            if (!li.hasClass('with_ul') || !li.hasClass('sfHover')) {
                $('> a',li).stop().animate({color:'#fff'})
            }
        }               
    })  
    content.tabs({
        actFu:function(_){
            if (_.prev && _.curr) {
                    h_last=_.prev.data('height');
                    h_new=_.curr.data('height');
                    _.prev.stop().animate({height:0, top:h_last/2}, function(){
                        _.prev.css({display:'none'})
                        _.curr.css({display:'block'}).stop().animate({height:h_new, top:0})
                        content.css({height:h_new});
                        h_cont=h_new+340;
                        centre()
                    })
            } else {
                if (_.curr) {
                    h_new=_.curr.data('height');
                    _.curr.css({display:'block'}).stop().animate({height:h_new, top:0})
                    content.css({height:h_new})
                    h_cont=h_new+340;
                    centre()
                }
                if (_.prev) {
                    h_last=_.prev.data('height');
                    _.prev.stop().animate({height:0, top:h_last/2}, function(){
                        _.prev.css({display:'none'});
                        content.css({height:0})
                        h_cont=340;
                        centre()
                    })
                }
            }
        },
        preFu:function(_){                      
            $('#content > ul > li').css({display:'none', position:'absolute', height:0})
        }
    })
    nav.navs(function(n, _){
        
        if (n=='close' || n=='#!/') {
            content.tabs(n);
        } else {
            content.tabs(n);
        }
    })
    function centre() {
        var h=$(window).height();
        if (h>h_cont) {
            m_top=(h-h_cont)/2+30;
        } else {
            m_top=30
        }
        $('#content').css({marginTop:m_top})
    }
    centre()
    $(window).resize(centre);   
})

El problema es q yo quiero tener mas de una galeria igual a esa y no se como modificar el JS sin que se me rompa todo.probe cambiando GALLERY1 de ID a CLASS y quedo "bien" pero la galeria no hace ni prev ni next.a ver quien me puede ayudar puedo enviarle los archivos. gracias!!. subi la pagina con las galerias COMBO Y BANQUETAS para que puedan ver el problema en WWW.SKULDEQUIPAMIENTOS.COM.AR/RENE

jmm87 · #2 (**permalink**) 08/01/2013, 07:46

www.skuldequipamientos.com.ar/rene (el rene con minuscula)