Jump to content

Dve JavaScript funkcije na jednoj strani?


vip88
 Share

Recommended Posts

Zdravo drugari,

pocetnik sam u JavaScriptu,pa sam naleteo na problem...imam funkciju koja mi divove menja kao slideshow jer u divu imam i sliku i naslov i text...i to sve lepo radi kad funkcija vazi za jedan nazovimo slide,mislim jedan div sa jednim IDem u sebi sadrzi druge divove i ti divovi se menjaju,to radi...e sad,kad na istoj strani ubacim drugi div sa drugim IDem i unutra drugi divovi koji trebaju da se menjaju,i toj funkciji npr. promenim da brze menja slideve,e tu nastaje problem...onda prvi div sa slajdovima ne radi,a drugi radi...kad izbrisem funkciju za drugi,onda prvi ponovo radi...citao sam na netu da postoji problem sa tim,pokusavao sam da stavim JavaScript u poseban fail,da se pokrece na onload i dzabe,sve isto...jel zna neko kako da to resim?

Hvala unapred,pozdrav!

 

<!DOCTYPE html>
<html>
<head>
<style>
.SlajdDiv{
        width: 920px;  
        height: 310px;
        overflow:hidden;
        border:10px solid #666;
        margin:10px 0px 0px 10px;
    }
    
.SlajdDiv img {
        float:left;
        margin-right:10px;
    }
    
.SlajdDiv p {
        margin:0px;
    }
    
.SlajdDiv h4 {
        margin:0px;
        padding:10px 0px;
        color:#64B1F8;
    }
    

</style>
<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
<script type="text/javascript">

        $(function(){
    $ds = $('#prvi div');
    $ds.hide().eq(0).show();
    setInterval(function(){
        $ds.filter(':visible').fadeOut(function(){
            var $div = $(this).next('div');
            if ( $div.length == 0 ) {
                $ds.eq(0).fadeIn();
            } else {
                $div.fadeIn();
            }
        });
    }, 10000);
});
        
            $(function(){
    $ds = $('#drugi div');
    $ds.hide().eq(0).show();
    setInterval(function(){
        $ds.filter(':visible').fadeOut(function(){
            var $div = $(this).next('div');
            if ( $div.length == 0 ) {
                $ds.eq(0).fadeIn();
            } else {
                $div.fadeIn();
            }
        });
    }, 2000);
});

</script>
</head>
<body>
<div id="prvi" class="SlajdDiv">
                <div>
                    <img src="images/SlideShow/1.jpg">
                    <h4>Naslov</h4>
                    <p>Text</p>
                </div>
                <div>
                    <img src="images/SlideShow/2.jpg">
                    <h4>Naslov</h4>
                    <p>Text</p>
                </div>
            </div> 

<div id="drugi"  class="SlajdDiv">
                <div>
                    <img src="images/SlideShow/1.jpg">
                    <h4>Naslov</h4>
                    <p>Text</p>
                </div>
                <div>
                    <img src="images/SlideShow/2.jpg">
                    <h4>Naslov</h4>
                    <p>Text</p>
                </div>
            </div> 
</body>
</html>

Link to comment
Share on other sites

Problem je u tome što ti je promenljiva $ds globalna, pa dolazi do sukoba ova dva koda, dodaj var ispred istih, ili nešto npr. na brzinu:

(function($) {
    $.fn.vip88Slideshow = function( interval ) {
        var $ds = $(this);
        $ds.hide().eq(0).show();
        setInterval( function() {
            $ds.filter(':visible').fadeOut( function(){
                var $div = $(this).next('div');
                 if ( $div.length == 0 ) {
                    $ds.eq(0).fadeIn();
                } else {
                    $div.fadeIn();
                }
            });
        }, interval);
        return this;
    }
}(jQuery));

$( function(){
    $('#prvi div').vip88Slideshow(10000);
    $('#drugi div').vip88Slideshow(2000);
});

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...