пятница, 11 сентября 2009 г.

Галерея картинок в блоге Blogger или три дня веселья!

Решил недавно встроить себе в блог Blogger галерею картинок. В инете есть много реализаций галерей, предпочтения решил отдать галереям которые построены на jQuery. Как ни странно но для такой простой задачи сразу не нашлось нормального решения, вернее не одно из них не работало запланированным способом.

День первый

Велосипедов в интернете хватает, вот решил в этот раз поездить на чужом и скачал Fancybox. На вид он довольно таки приятный, да и понравилась асинхронная загрузка контента во сплывающем pop-up окне(есть 2 реализации, через загрузку контента в div или в iframe).

Прокачан этот плагин хорошо и умеет следующие вещи:
1. Отображать одну картинку во всплывающем окне
2. Отображать галерею картинок во всплывающем окне
3. Отображать html контент подгруженный асинхронно во всплывающем окне.

Скачал исходники с Google Code, и прочитав инструкцию по внедрению приступил к операции.

Длилась она не долго, чтобы не быть голословным наведите на картинку ниже и кликните по ней.




Что вы видите? Всплывающее окно появилось?
Вот так и я сразу ничего не заметил, но поверьте хоть вы его не видите, но оно есть!
Что бы подтвердить мои слова необходимо прокрутить в самый низ страницы после того как кликнете на изображении.

Результат мне не понравился, заявленый функционал не работает, не по феншую это %). Опять на выручку пришел поиск гугла, наткнулся я на обсуждение данной проблемы и поняв что результата быстрого я не получу оставил эту идею до лучших времен.

День второй

При написании очередного поста опять возникло желание внедрить галерею, поиски продолжились. В этот раз мне на глаза попалась реализация Lightbox2, решил не изменять предпочтениям и нашел версию под jquery.

Имеет следующие возможности:
1. Отображать одну картинку во всплывающем окне.
2. Отображать галерею картинок во всплывающем окне.

Как не старался я, но результат точь в точь был как при работе с FancyBox. В оба дня уже порывался поковыряться поглубже в самом коде, но решил что в дебри влезать что то не хочется.

День третий

Раз не получается внедрить прокачанные вещи, необходимо попробовать внедрить что то попроще, решил я для себя. Чем проще реализация, тем проще найти причину ошибок. На этот раз мне попалась статья How to: Create a fancy image gallery with JQuery. Подключив файлы jquery-screenshots-preview.js и jquery-screenshots-preview.css начал проверять.

jquery-screenshots-preview.js
this.screenshotPreview = function(){
        /* CONFIG */
                xOffset = 10;
                yOffset = 30;

                // these 2 variable determine popup's distance from the cursor
                // you might want to adjust to get the right result

        /* END CONFIG */
        $("a.screenshot").hover(function(e){
                this.t = this.title;
                this.title = "";
                var c = (this.t != "") ? "
" + this.t : "";
                $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
                $("#screenshot")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast");
    },
        function(){
                this.title = this.t;
                $("#screenshot").remove();
    });
        $("a.screenshot").mousemove(function(e){
                $("#screenshot")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });
};
this.imagePreview = function(){
        /* CONFIG */

                xOffset = 10;
                yOffset = 30;

                // these 2 variable determine popup's distance from the cursor
                // you might want to adjust to get the right result

        /* END CONFIG */
        $("a.preview").hover(function(e){
                this.t = this.title;
                this.title = "";
                var c = (this.t != "") ? "
" + this.t : "";
                $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
                $("#preview")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast");
    },
        function(){
                this.title = this.t;
                $("#preview").remove();
    });
        $("a.preview").mousemove(function(e){
                $("#preview")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });
};
this.tooltip = function(){
        /* CONFIG */
                xOffset = 10;
                yOffset = 20;
                // these 2 variable determine popup's distance from the cursor
                // you might want to adjust to get the right result
        /* END CONFIG */
        $("a.tooltip").hover(function(e){
                this.t = this.title;
                this.title = "";
                $("body").append("<p id='tooltip'>"+ this.t +"</p>");
                $("#tooltip")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast");
    },
        function(){
                this.title = this.t;
                $("#tooltip").remove();
    });
        $("a.tooltip").mousemove(function(e){
                $("#tooltip")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });
};

#screenshot{
        position:absolute;
        border:1px solid #ccc;
        background:#333;
        padding:5px;
        display:none;
        color:#fff;
}

#preview{
        position:absolute;
        border:1px solid #ccc;
        background:#333;
        padding:5px;
        display:none;
        color:#fff;
}

#tooltip{
        position:absolute;
        border:1px solid #333;
        background:#f7f5d1;
        padding:2px 5px;
        color:#333;
        display:none;
}

Html добавленый в статью
<a id="single_image" href="http://sscaos.googlecode.com/svn/trunk/nft/sr/gmail2_1.jpg"><img src="http://sscaos.googlecode.com/svn/trunk/nft/sr/gmail2_1.jpg"/></a>

В этот раз результат был тотже, ничего не изменилось, чего и следовало ожидать :(, но это меня уже не смущало так как я решил найти причину сбоев.

Вооружившись Firebug-ом начал тестировать. Как оказалось, что если принудительно указать расположения для всплывающего элемента, то он становится на заданную позицию, но через некоторое время отрабатывал один из скриптов сайта и картинка уезжала в конец страницы. Решив, что дело не благодарное искать какой именно скрипт занимается вредительством, начал искать метод как его обойти.

Через время меня осенило, в javascript при отработке событий hover и mousemove я добавил установку позиционирования. Проверил, действительно работает!
Вносим изменения в js файл и наслаждаемся функционалом.

this.screenshotPreview = function(){
        /* CONFIG */

                xOffset = 10;
                yOffset = 30;

                // these 2 variable determine popup's distance from the cursor
                // you might want to adjust to get the right result

        /* END CONFIG */
        $("a.screenshot").hover(function(e){
                this.t = this.title;
                this.title = "";
                var c = (this.t != "") ? "" + this.t : "";
                $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
                $("#screenshot").css("position", "absolute")
.css("border", "1px solid #ccc")
.css("background", "#333")
.css("padding", "5px")
.css("color", "#fff")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast");
    },
        function(){
                this.title = this.t;
                $("#screenshot").remove();
    });
        $("a.screenshot").mousemove(function(e){
                $("#screenshot").css("position", "absolute")
.css("border", "1px solid #ccc")
.css("background", "#333")
.css("padding", "5px")
.css("color", "#fff")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });
};
this.imagePreview = function(){
        /* CONFIG */

                xOffset = 10;
                yOffset = 30;

                // these 2 variable determine popup's distance from the cursor
                // you might want to adjust to get the right result

        /* END CONFIG */
        $("a.preview").hover(function(e){
                this.t = this.title;
                this.title = "";
                var c = (this.t != "") ? "" + this.t : "";
                $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
                $("#preview")
      .css("position", "absolute")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast");
    },
        function(){
                this.title = this.t;
                $("#preview").remove();
    });
        $("a.preview").mousemove(function(e){
                $("#preview").css("position", "absolute")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });
};
this.tooltip = function(){
        /* CONFIG */
                xOffset = 10;
                yOffset = 20;
                // these 2 variable determine popup's distance from the cursor
                // you might want to adjust to get the right result
        /* END CONFIG */
        $("a.tooltip").hover(function(e){
                this.t = this.title;
                this.title = "";
                $("body").append("<p id='tooltip'>"+ this.t +"</p>");
                $("#tooltip").css("position", "absolute")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast");
    },
        function(){
                this.title = this.t;
                $("#tooltip").remove();
    });
        $("a.tooltip").mousemove(function(e){
                $("#tooltip").css("position", "absolute")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });
};

$(document).ready(function(){
        tooltip();//active les tooltip simple
        imagePreview();//active les tooltip image preview
        screenshotPreview();//active les tooltip lien avec preview
});

Чуть не забыл, еще необходимо скачать и подключить jquery




Хоть это и не полнофункциональная галерея, но уже лучше чем ничего, а главное понятно как обойти скрипты блога Blogger.

1 комментарий:

  1. не совсем понятно, что и куда вставлять, представленный html код блоггер не переваривает, можно пример страницы?

    ОтветитьУдалить