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

/*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;
}

var simpleGallery_navpanel={
loadinggif: 'https://2.bp.blogspot.com/-ksi5eL8Tbnw/TlVybEe2EeI/AAAAAAAAExc/bzJY4U3_5Dk/s1600/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: [ 'https://2.bp.blogspot.com/-LzMDVlVfxmQ/TlVybqSABOI/AAAAAAAAEx8/riOJdIu1eRc/s1600/left.gif', 'https://1.bp.blogspot.com/-ZkATWoPt8Q8/TlVybVMA4xI/AAAAAAAAExs/zoAjOL7erWY/s1600/play.gif', 'https://4.bp.blogspot.com/-IlIucHdUM-I/TlVybkMej0I/AAAAAAAAEx0/yQvxG-paQVc/s1600/right.gif', 'https://1.bp.blogspot.com/-qdHg1fyty6A/TlVybOlRciI/AAAAAAAAExk/oio-_kn2KO8/s1600/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('

').parent()
})()
for (var i=0; isetting.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=$('

') //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

14 ответов к «Создание простой галереи blogspot»

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

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

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

    [
    ["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", "цветы"]
    ],

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *