Blog

Galeria zdjęć javascript

Napisane 6 lipca 2011 | Brak komentarzy

Galeria i/lub przewijarka zdjęć w javascipcie. Skrypt wykorzystuje jQuery.

<!-- Skrypt wykorzystuje jQuery więc w sekcji head należy go załadować. -->
<script type="text/javascript" src="/js/jquery.js"></script>

<!-- Już gdzieś w body należy umieścić kod html wyświetlający zdjęcia. -->
<div class="iweb_gallery" id="galeria_test">
    <img src="/img/skrypty/galeria/1.jpg" />
    <img src="/img/skrypty/galeria/2.jpg" />
    <img src="/img/skrypty/galeria/3.jpg" />
    <img src="/img/skrypty/galeria/4.jpg" />
    <img src="/img/skrypty/galeria/5.jpg" />
</div>

</div>

.iweb_gallery {
    position: relative;
    width: 500px;
    height: 200px;
}

.iweb_gallery img {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 1;
}

.iweb_gallery img:first-child {
    display: inline;
}

.iweb_gallery div {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
    width: 100%;
    text-align: center;
    background: black;
    filter: alpha(opacity=70);
    opacity: 0.70;
    padding: 2px 0;
}

.iweb_gallery div a {
    color: white;
    font-size: 13px;
    padding: 0 5px;
    text-decoration: none;
}

.iweb_gallery div a:hover {
    background: #293135;
}

.iweb_gallery div a.on {
    background: #67b8e7;
}

.iweb_gallery {

position: relative;

width: 500px;

height: 200px;

}

.iweb_gallery img {

position: absolute;

top: 0;

left: 0;

display: none;

z-index: 1;

}

.iweb_gallery img:first-child {

display: inline;

}

.iweb_gallery div {

position: absolute;

bottom: 0;

right: 0;

z-index: 3;

width: 100%;

text-align: center;

background: black;

filter: alpha(opacity=70);

opacity: 0.70;

padding: 2px 0;

}

.iweb_gallery div a {

color: white;

font-size: 13px;

padding: 0 5px;

text-decoration: none;

}

.iweb_gallery div a:hover {

background: #293135;

}

.iweb_gallery div a.on {

background: #67b8e7;

}

var iwebGallery = {
    id: '',
    current_index: 0,
    delay: 4000,
    fadein: 1000,
    imgs: null,
    reset: 0,

    init: function(id) {
        this.id = '#'+id;
        this.imgs = $(this.id+' img');

        $(this.id).append('<div'+'>'+'<'+'/div>');

        this.imgs.each(function(index) {
            $(iwebGallery.id+' div').append('<a href="#">'+(index+1)+'<'+'/a>');

        });

        $(this.id+' div a').each(function(index) {
            $(this).click(function(){iwebGallery.set(index);this.blur();return false;});
        });

        this.start();
    }, 

    start: function(index) {
        if (!index) index = 0;
        this.imgs.css('display', 'none').css('z-index', 1);
        $(this.imgs[index]).css('display', 'inline');
        this.set_index(index);
        this.set_on(index);

        this.animate();
    },

    set: function(index) {
        clearTimeout(this.reset);

        if (index == this.current_index) {
            iwebGallery.animate();
        } else {   
            this.set_on(index);

            this.imgs.css('z-index', 1);
            $(this.imgs[index]).css('z-index', 2).fadeIn(0, function(){
                iwebGallery.current().css('display', 'none')
                iwebGallery.set_index(index);
                iwebGallery.animate();
            });
        }  

    }, 

    animate: function() {
        this.reset = setTimeout(function(){
            iwebGallery.imgs.css('z-index', 1);
            iwebGallery.set_on(iwebGallery.next_index());
            iwebGallery.next().css('z-index', 2).fadeIn(iwebGallery.fadein, function(){
                        iwebGallery.current().css('display', 'none');
                        iwebGallery.set_index(iwebGallery.next_index());
                        });
            iwebGallery.animate();
            }, this.delay + this.fadein);
    },

    set_index: function(index) {
        this.current_index = index;
    },

    set_on: function(index) {
        var on=$(this.id+' div a');
        on.removeClass('on');
        $(on[index]).addClass('on');
    },

    current: function() {
        return $(this.imgs[this.current_index]);
    }, 

    next: function() {
        return $(this.imgs[this.next_index()]);
    },

    next_index: function() {
        return this.imgs.length == this.current_index + 1 ? 0 : this.current_index + 1;
    }
}

$(document).ready(function() {
    iwebGallery.init('galeria_test');
});

var iwebGallery = {

id: '',

current_index: 0,

delay: 4000,

fadein: 1000,

imgs: null,

reset: 0,

init: function(id) {

this.id = '#'+id;

this.imgs = $(this.id+' img');

$(this.id).append('<div'+'>'+'<'+'/div>');

this.imgs.each(function(index) {

$(iwebGallery.id+' div').append('<a href="#">'+(index+1)+'<'+'/a>');

});

$(this.id+' div a').each(function(index) {

$(this).click(function(){iwebGallery.set(index);this.blur();return false;});

});

this.start();

start: function(index) {

if (!index) index = 0;

this.imgs.css('display', 'none').css('z-index', 1);

$(this.imgs[index]).css('display', 'inline');

this.set_index(index);

this.set_on(index);

this.animate();

set: function(index) {

clearTimeout(this.reset);

if (index == this.current_index) {

iwebGallery.animate();

} else {

this.set_on(index);

this.imgs.css('z-index', 1);

$(this.imgs[index]).css('z-index', 2).fadeIn(0, function(){

iwebGallery.current().css('display', 'none')

iwebGallery.set_index(index);

iwebGallery.animate();

});

}

animate: function() {

this.reset = setTimeout(function(){

iwebGallery.imgs.css('z-index', 1);

iwebGallery.set_on(iwebGallery.next_index());

iwebGallery.next().css('z-index', 2).fadeIn(iwebGallery.fadein, function(){

iwebGallery.current().css('display', 'none');

iwebGallery.set_index(iwebGallery.next_index());

});

iwebGallery.animate();

}, this.delay + this.fadein);

set_index: function(index) {

this.current_index = index;

set_on: function(index) {

var on=$(this.id+' div a');

on.removeClass('on');

$(on[index]).addClass('on');

current: function() {

return $(this.imgs[this.current_index]);

next: function() {

return $(this.imgs[this.next_index()]);

next_index: function() {

return this.imgs.length == this.current_index + 1 ? 0 : this.current_index + 1;

}

$(document).ready(function() {

iwebGallery.init('galeria_test');

});

Blog

Galeria zdjęć javascript

Napisz komentarz