2012-09-12

Создание простой галереи blogspot

Такую галерея фотографий blogspot вы можете добавить в свой блог, как в гаджет HTMl / Javascript в любую часть блога – колонку или футер, так и в отдельное сообщение блога.

Код галереи blogspot:

..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<style type="text/css">
/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 1px solid #666;
}
#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
font: 10px normal verdana, arial;
}
</style>
<script type="text/javascript" >
var simpleGallery_navpanel={
    loadinggif: 'http://2.bp.blogspot.com/-ksi5eL8Tbnw/TlVybEe2EeI/AAAAAAAAExc/bzJY4U3_5Dk/s400/ajaxload.gif', //full path or URL to loading gif image
    panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container
    images: [ 'http://2.bp.blogspot.com/-LzMDVlVfxmQ/TlVybqSABOI/AAAAAAAAEx8/riOJdIu1eRc/s400/left.gif', 'http://1.bp.blogspot.com/-ZkATWoPt8Q8/TlVybVMA4xI/AAAAAAAAExs/zoAjOL7erWY/s400/play.gif', 'http://4.bp.blogspot.com/-IlIucHdUM-I/TlVybkMej0I/AAAAAAAAEx0/yQvxG-paQVc/s400/right.gif', 'http://1.bp.blogspot.com/-qdHg1fyty6A/TlVybOlRciI/AAAAAAAAExk/oio-_kn2KO8/s400/pause.gif'], //nav panel images (in that order)
    imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images
    slideduration: 500 //duration of slide up animation to reveal panel
}
function simpleGallery(settingarg){
    this.setting=settingarg
    settingarg=null
    var setting=this.setting
    setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height)
    setting.fadeduration=parseInt(setting.fadeduration)
    setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0
    setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
    setting.preloadfirst=(!jQuery.Deferred)? false : (typeof setting.preloadfirst!="undefined")? setting.preloadfirst : true //Boolean on whether to preload all images before showing gallery
    setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play
    setting.currentstep=0 //keep track of # of slides slideshow has gone through
    setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles
    setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
    setting.oninit=setting.oninit || function(){}
    setting.onslide=setting.onslide || function(){}
    var preloadimages=[], longestdesc=null, loadedimages=0
    var dfd = (setting.preloadfirst)? jQuery.Deferred() : {resolve:function(){}, done:function(f){f()}} //create real deferred object unless preloadfirst setting is false or browser doesn't support it
    setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
    setting.$loadinggif=(function(){ //preload and ref ajax loading gif
        var loadgif=new Image()
        loadgif.src=simpleGallery_navpanel.loadinggif
        return jQuery(loadgif).css({verticalAlign:'middle'}).wrap('<div style="position:absolute;text-align:center;width:100%;height:100%" />').parent()
    })()
    for (var i=0; i<setting.imagearray.length; i++){  //preload slideshow images
        preloadimages[i]=new Image()
        preloadimages[i].src=setting.imagearray[i][0]
        if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
            setting.longestdesc=setting.imagearray[i][3]
        jQuery(preloadimages[i]).bind('load error', function(){
            loadedimages++
            if (loadedimages==setting.imagearray.length){
                dfd.resolve() //indicate all images have been loaded
            }
        })
    }
    var slideshow=this
    jQuery(document).ready(function($){
        var setting=slideshow.setting
        setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV
        if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
            alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
            return
        }
        setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
            .css({position:'absolute', left:0, top:0})
            .appendTo(setting.$wrapperdiv)
        setting.$loadinggif.css({top:setting.dimensions[1]/2-30}).appendTo(setting.$wrapperdiv) //30 is assumed height of ajax loading gif
        setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects
        setting.navbuttons=simpleGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)
            setting.descdiv=simpleGallery.routines.adddescpanel(setting)
        $(setting.navbuttons).filter('img.navimages').css({opacity:0.8})
            .bind('mouseover mouseout', function(e){
                $(this).css({opacity:(e.type=="mouseover")? 1 : 0.8})
            })
            .bind('click', function(e){
                var keyword=e.target.title.toLowerCase()
                slideshow.navigate(keyword) //assign behavior to nav images
            })
        dfd.done(function(){ //execute when all images have loaded
            setting.$loadinggif.remove()
            setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')})
            setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')})
            slideshow.showslide(setting.curimage) //show initial slide
            setting.oninit.call(slideshow) //trigger oninit() event
            $(window).bind('unload', function(){ //clean up and persist
                $(slideshow.setting.navbuttons).unbind()
                if (slideshow.setting.persist) //remember last shown image's index
                    simpleGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
                jQuery.each(slideshow.setting, function(k){
                    if (slideshow.setting[k] instanceof Array){
                        for (var i=0; i<slideshow.setting[k].length; i++){
                            if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
                                slideshow.setting[k][i].innerHTML=null
                            slideshow.setting[k][i]=null
                        }
                    }
                    if (slideshow.setting[k].innerHTML) //catch gallerydesctext div
                        slideshow.setting[k].innerHTML=null
                    slideshow.setting[k]=null
                })
                slideshow=slideshow.setting=null
            })
        }) //end deferred code
    }) //end jQuery domload
}
simpleGallery.prototype={
     navigate:function(keyword){
        clearTimeout(this.setting.playtimer)
        this.setting.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number
        if (!isNaN(parseInt(keyword))){
            this.showslide(parseInt(keyword))
        }
        else if (/(prev)|(next)/i.test(keyword)){
            this.showslide(keyword.toLowerCase())
        }
        else{ //if play|pause button
            var slideshow=this
            var $playbutton=$(this.setting.navbuttons).eq(1)
            if (!this.setting.ispaused){ //if pause Gallery
                this.setting.autoplay[0]=false
                $playbutton.attr({title:'Play', src:simpleGallery_navpanel.images[1]})
            }
            else if (this.setting.ispaused){ //if play Gallery
                this.setting.autoplay[0]=true
                this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1])
                $playbutton.attr({title:'Pause', src:simpleGallery_navpanel.images[3]})
            }
            slideshow.setting.ispaused=!slideshow.setting.ispaused
        }
    },
     showslide:function(keyword){
        var slideshow=this
        var setting=slideshow.setting
        var totalimages=setting.imagearray.length
        var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
            : (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
            : Math.min(keyword, totalimages-1)
        setting.gallerylayers[setting.bglayer].innerHTML=simpleGallery.routines.getSlideHTML(setting.imagearray[imgindex])
        setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
            .stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
                clearTimeout(setting.playtimer)
                setting.gallerylayers[setting.bglayer].innerHTML=null  //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below)
                try{
                    setting.onslide.call(slideshow, setting.gallerylayers[setting.fglayer], setting.curimage)
                }catch(e){
                    alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
                }
                setting.currentstep+=1
                if (setting.autoplay[0]){
                    if (setting.currentstep<=setting.totalsteps)
                        setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1])
                    else
                        slideshow.navigate("play/pause")
                }
            }) //end callback function
        setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background
        setting.fglayer=setting.bglayer
        setting.bglayer=(setting.bglayer==0)? 1 : 0
        setting.curimage=imgindex
        setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length
        if (setting.imagearray[imgindex][3]){ //if this slide contains a description
            setting.$descpanel.css({visibility:'visible'})
            setting.descdiv.innerHTML=setting.imagearray[imgindex][3]
        }
        else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled)
            setting.descdiv.innerHTML=null
            setting.$descpanel.css({visibility:'hidden'})
         }
    },
     showhidenavpanel:function(state){
        var setting=this.setting
        var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
        setting.$navpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)
            this.showhidedescpanel(state)
    },
     showhidedescpanel:function(state){
        var setting=this.setting
        var endpoint=(state=="show")? 0 : -setting.descpanelheight
        setting.$descpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)
    }
}
simpleGallery.routines={
     getSlideHTML:function(imgelement){
        var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
        layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0" />'
        layerHTML+=(imgelement[1])? '</a>' : ''
        return layerHTML //return HTML for this layer
    },
     addnavpanel:function(setting){
        var interfaceHTML=''
        for (var i=0; i<3; i++){
            var imgstyle='position:relative; border:0; cursor:hand; cursor:pointer; top:'+simpleGallery_navpanel.imageSpacing.offsetTop[i]+'px; margin-right:'+(i!=2? simpleGallery_navpanel.imageSpacing.spacing+'px' : 0)
            var title=(i==0? 'Prev' : (i==1)? (setting.ispaused? 'Play' : 'Pause') : 'Next')
            var imagesrc=(i==1)? simpleGallery_navpanel.images[(setting.ispaused)? 1 : 3] : simpleGallery_navpanel.images[i]
            interfaceHTML+='<img class="navimages" title="' + title + '" src="'+ imagesrc +'" style="'+imgstyle+'" /> '
        }
        interfaceHTML+='<div class="gallerystatus" style="margin-top:1px">' + (setting.curimage+1) + '/' + setting.imagearray.length + '</div>'
        setting.$navpanel=$('<div class="navpanellayer"></div>')
            .css({position:'absolute', width:'100%', height:setting.panelheight, left:0, top:setting.dimensions[1], font:simpleGallery_navpanel.panel.fontStyle, zIndex:'1001'})
            .appendTo(setting.$wrapperdiv)
        $('<div class="navpanelbg"></div><div class="navpanelfg"></div>') //create inner nav panel DIVs
            .css({position:'absolute', left:0, top:0, width:'100%', height:'100%'})
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"navpanelbg" div
            .eq(1).css({paddingTop:simpleGallery_navpanel.panel.paddingTop, textAlign:'center', color:'white'}).html(interfaceHTML).end() //"navpanelfg" div
            .appendTo(setting.$navpanel)
        return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects
    },
     adddescpanel:function(setting){
        setting.$descpanel=$('<div class="gallerydesc"><div class="gallerydescbg"></div><div class="gallerydescfg"><div class="gallerydesctext"></div></div></div>')
            .css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'})
            .find('div').css({position:'absolute', left:0, top:0, width:'100%'})
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"gallerydescbg" div
            .eq(1).css({color:'white'}).end() //"gallerydescfg" div
            .eq(2).html(setting.longestdesc).end().end()
            .appendTo(setting.$wrapperdiv)
        var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext')
        setting.descpanelheight=$gallerydesctext.outerHeight()
        setting.$descpanel.css({top:-setting.descpanelheight, height:setting.descpanelheight}).find('div').css({height:'100%'})
        return setting.$descpanel.find('div.gallerydesctext').get(0) //return gallery description DIV as a DOM object
    },
     getCookie:function(Name){
        var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
        if (document.cookie.match(re)) //if cookie found
            return document.cookie.match(re)[0].split("=")[1] //return its value
        return null
    },
     setCookie:function(name, value){
        document.cookie = name+"=" + value + ";path=/"
    }
}
</script>
<script type="text/javascript">
var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray: [
        ["IMAGE LINK 1", "#", "_new", "DESCRIPTION"],
         ["IMAGE LINK 2", "#", "_new", "DESCRIPTION"],

        ["IMAGE LINK 3","#", "_new", "DESCRIPTION"],

        ["IMAGE LINK 4", "#", "_new", "DESCRIPTION"],

        ["IMAGE LINK 5", "#", "_new", "DESCRIPTION"]
     ],
    autoplay: [true, 2000, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
        //Keyword "this": references current gallery instance
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
})
</script>
<div id="simplegallery1"></div>

Скопируйте данный код, вставьте ссылки на изображения (вместо IMAGE LINK1, IMAGE LINK 2 и т.д.) , которые будут в вашей галереи, знак # замените на ссылки на страницы (в этом случае при нажатии на фото будет открываться соответствующая запись, таким образом можно настроить отображение лучших сообщений блога, у вас получится слайдер сообщений блога). Измените DESCRIPTION на описание к соответствующей фотографии. В эту галерею можно добавить лишь изображения с фиксированными размерами, а именно 300 на 200. Если вы добавите изображения большего размера, то изображения получатся срезанными. Если вы хотите изменить размер изображений, то нужно править в коде параметры [300, 200], где 300 – это ширина изображения, а 200 – высота. Если вы не хотите, чтобы фотографии автоматически воспроизводились, то измените   true на false. И последнее, чтобы изменить скорость воспроизведения между кадрами измените показатель 2000.

Вот и все!

15 комментариев :

БЛОGГЕР комментирует...

Привет. Отличная статья.
Может быть есть смысл этот код разбить на части?
Например, СSS вынести в шаблон.

videomuzon комментирует...

Спасибо, а я-то думаю, как люди делают такую галерею..

Mycrib комментирует...

БЛОGГЕР, можно попробовать ;)

Vovilumax комментирует...

Спасибо, всё получилось :) и очень красиво...

Хамавова Асиль комментирует...

есть возможность увеличить число картинок с 5 до 10 например???

Mycrib комментирует...

Конечно, есть. Просто добавьте дополнительные строчки , ["IMAGE LINK 1", "#", "_new", "DESCRIPTION"] в соответствующем месте кода.

Хамавова Асиль комментирует...

Он перестает работать если добавить, пробовала уже. И еще вылазит по верх всего, на сайте, а так шикарная галерея, спасибо вам большое:)

Mycrib комментирует...

Асиль, все работает. Специально добавила еще одно изображение в свою галерею. Я думаю, что происходит сбой кода при редактировании, так как он очень сложный. Лучше всего сделать так - скопировать из вашего кода отрезок со ссылками на изображение, вставить еще одно. Получиться что-то типа:

[
["http://romantic-online.com/uploads/images/9/0/5/7/281/d1b00255ad.jpg", "#", "_new", "закат"],

["http://romantic-online.com/uploads/images/0/2/5/b/281/thumbs_8d261d5319.jpg", "#", "_new", "морской рассвет"],

["http://romantic-online.com/uploads/images/7/f/8/0/281/thumbs_b94d310f59.jpg","#", "_new", "еще закат"],

["http://romantic-online.com/uploads/images/6/7/3/d/281/thumbs_91baf38cf4.jpg", "#", "_new", "красивое фото"],

["http://img-fotki.yandex.ru/get/6519/40839264.4/0_894c8_a64c8d9_M.jpg", "#", "_new", "профиль"],

["http://luk-media.ru/blog/pic/poppy_flower.jpg", "#", "_new", "цветы"]
],

Затем скопируйте код до этого отрезка с моей страницы и вставьте в блокноте в начале. Затем скопируйте конец длинного кода. Таким образом вы получите длинный готовый код. Только будьте внимательны при копировании. Лучше уж сделать так, чем заново составлять коды.

Ирина комментирует...

Спасибо!

Екатерина Чернакова комментирует...

Простите, не совсем поняла, вместо IMAGE LINK1 вставляем ссылку на изображение формата 300 на 200? Но куда загружать эти изображения, чтоб получить ссылку. Каждое в новую страницу???

Mycrib комментирует...

Екатерина, загрузить картинки можно куда угодно. Лишь бы не происходило сжатия изображения. Варианты - яндекс.фотки, радикал. Больше мне нравятся яндекс.фотки, так как на радикале обилие рекламы.
При загрузке на любой из этих фотохостингов поставьте в настройках не уменьшать изображение, не создавать превью и т.п.
Ссылку на иображение вы увидите в кодах.
Выглядит она следующим образом:
http://бла-бла-бла.jpg или так
http://бла-бла-бла.png
Про Радикал вы можете почитать подробнее в моем блоге

Екатерина Чернакова комментирует...

Большое спасибо!

Margarita D. комментирует...

У меня сам виджет добавился, но значок изображения почему то перечеркнут...((((

Mycrib комментирует...

Маргарита, киньте ссылку на страницу с галереей, я посмотрю где может быть ошибка.

Екатерина Нарольская комментирует...
Этот комментарий был удален автором.

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML