Profruit banner

Умен звънец в openHAB

16 декември 2023

Телефонът е винаги с мен и сега, където и да се намирам получавам известие от openHAB, че някой е позвънил и чака пред вратата. А ако ме няма вкъщи става ясно часа и датата на последното позвъняване.

Tasmota Multipress

30 септември 2023

Идеята е Sonoff Touch T1 US 2 в салона, да управлява освен своето осветление и това в кухнята, а още вентилатора.

DIY 12V 1A WiFi Router UPS

22 април 2023

При поредно прекъсване на захранването вкъщи, батерията на нoтбука и двата UPS автоматично превключват на аварийно захранване и едновременно полита съобщение за конфуза

Zigbee2MQTT клониране

21 януари 2023

... как да клонираме съществуваща настройка на Zigbee2MQTT без да се налага последвало интервю на zigbee-устройствата.

LD2410 - бюджетен датчик присъствие в openHAB

11 февруари 2023

Цената на HLK-LD2410 зададе име на поредната тема в моя блог. С негова помощ се постига "народен" датчик присъствие в домашната автоматизация. . ...


Площадката на Blogger предлага неограничено пространство. Много висока скорост на зареждане на страницата. Най-голямото удоволствие е възможността за писане чрез код и редактиране на същия по свой вкус. Този свобода дава възможност всеки един блог да бъде уникален. В добавка безплатен, си струва да останеш тук и да се грижеш за него като за свое отроче. Нека разгледаме следните варианти за споделяне на снимки в Blogger.

Качване снимка от Blogger


Разясненията в своите теми в Blogger (profruit.blogspot.com) аз подкрепям с снимки. По замисъл тези снимки се съхраняват в Picasa. Picasa и Blogger са собственост на Google и това унифицира нещата за ползване под едно потребителско име. Всяка снимка се качва с помощта на java-редактор, намиращ се в админ-панела на Blogger. Този редактор върши черната работа за писане на html - код при оформяне на поредна статия. Аз не харесвам генерирания от него код. Той е обременен и неоптимизиран. Липсват атрибути alt="" и title="". Кликайки по снимката, посетителя бива отвеждан в нов прозорец, за да я разгледа. Следва интуитивно затваряне на снимката след разглеждане и на практика затваряне на блога. Никак неудобно и те кара, да помниш, че си пренасочен, за да се върнеш обратно. Тъпо!

Това е кодът, управляващ снимката.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinbIwFumNljPoDA2Kys22s9GWLO0XnEzlI2yz9G1VEnlq6U89U-QjacwbMc9ZuLbBHWrVNhrVZheZ4l9acuFEbS_UclSKRcupOlnv2q8DheucVnvmjNRX-iSgLolycmX8FwdmeYf2oyJxA/s1600/code.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinbIwFumNljPoDA2Kys22s9GWLO0XnEzlI2yz9G1VEnlq6U89U-QjacwbMc9ZuLbBHWrVNhrVZheZ4l9acuFEbS_UclSKRcupOlnv2q8DheucVnvmjNRX-iSgLolycmX8FwdmeYf2oyJxA/s320/code.jpg" /></a>
</div>

Корекция код от Profruit

code

Не малка част от посетителите ми са доведе от image.google.com. Обяснение за това е, че си правя труда да добавям липсващите атрибути alt="" и title="" в отделната снимка. Реших, че е по-добре снимката да се отваря в пълен размер в нов прозорец с помощта на атрибут target="_blank". По този начин посетителя не напуска страницата. От друга страна е леко дразнещо пръкването на нов прозрец и това го съдя по себе си.

Това е кодът, управляващ снимката.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinbIwFumNljPoDA2Kys22s9GWLO0XnEzlI2yz9G1VEnlq6U89U-QjacwbMc9ZuLbBHWrVNhrVZheZ4l9acuFEbS_UclSKRcupOlnv2q8DheucVnvmjNRX-iSgLolycmX8FwdmeYf2oyJxA/s1600/code.jpg" target="_blank" title="profruit корекция"><img border="0" alt="code" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinbIwFumNljPoDA2Kys22s9GWLO0XnEzlI2yz9G1VEnlq6U89U-QjacwbMc9ZuLbBHWrVNhrVZheZ4l9acuFEbS_UclSKRcupOlnv2q8DheucVnvmjNRX-iSgLolycmX8FwdmeYf2oyJxA/s320/code.jpg"  />
</a>

Lightbox за Blogger

code
 Това ме наведе на мисълта да впрегна Lightbox в услуга на моя блог. Lightbox е дело на Lokesh Dhakar. Това е JS (джава скрипт), който придава модерен и елегантен вид на вашите снимки. Определено е много ефектен и повдига имиджа на сайта ви. Поднася снимките на затъмнен фон, а това повдига констраста и спомага за по-комфорно разглеждане.

Инсталация на Lightbox

  1. Влезте в админ-панела на вашия блог
  2. Преминете в Дизайн > Редактиране HTML кода
  3. Намерете таг </head>
  4. Маркирайте го и го заменете с кода, показан долу
<!--Light Box Code Starts  Bloggerplugins.ORG-->
<style>
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-MDAPdu58eUMCqOSfySA6Tg2angvxw9xzVx3vLfq0KOIIT_W9nwnyLJlwPVnhRHP3fv5mzXxnDfxCAahSTStOGRF0t3s_JNFiE5lBHlLwZaeJEpgI67gf5Jamy93B3WEvsGIaGJ8IOmo/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEh-xl3A5mIlFIGwM7zujVBFNL6Mpt8tufjkyqJYB2PQQSvttX2k8JbwdGPaZYKIvOr7YiIfSPtk2_bhHZzshqMtpxbySrNPTXyWBTPBc7YIaFwWZgj1qrjb7UZyjV4q4t25bmJGQREhk/) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }
#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }       
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}    
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
</head>

На снимката се вижда замяната с предложения код. Той е предоставен от Bloggerplugins.OR. В края на замяната съхранете измененията. Това е всичко. Остава да допълните един атрибут - rel="lightbox" в кода на споделената снимка, за да оживите Lightbox. Пример:

<a rel="lightbox" href="адрес на снимката" title=""><img src="адрес на миниатюрата" alt="" border="0" /></a>

Фотоалбум Тел Авив

Tel AvivTel AvivTel AvivTel Aviv

С предложения скрипт можете да създавате фотоалбум. Достатъчно е да подберете нужните снимки и да допълните атрибута по показания начин - rel="lightbox[име на албума]".

Натиснете предварително бутон F11 от вашата клавиатура. Това ще отвори браузера ви на пълен екран и по-комфортно ще разглеждате снимките. Забележете, че можете да управлявате галерията с следните бутони.
  • N - напред
  • P - назад
  • С - затваряне

Slimbox 2 за Blogger

Скелет на моя блог е Zinmag Primus v1.02. В шапката се вижда въртележка. Тя се задвижва от JQuery. След добавяне на кода за Lightbox, въртележката спря. Някакъв конфликт настъпва между отделните скриптове и аз потърсих решение на въпроса. Оказа се разновидност Slimbox 2. Ако при вас настъпи подобен проблем, ползвайте следния код на Slimbox 2.

<!--LightBox 2 @profruit.blog -->
<link href='http://my_site/slimbox2.css' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js' type='text/javascript'></script>
<script src='my_site/slimbox2.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function()
{

});
</script>

Файл-скриптове и файл-стил можете да изтеглите от тук:
slimbox2.js
slimbox2.css

Картинките можете да изтеглите от тук:
prevnextclose

Картинките можете да преведете в графичен редактор на български език или език по ваше желание. Качете ги в "Уеб албуми Picasa". Копирайте пълните им адресите там и ги заменете в файл slimbox2.css.

Регистрирайте си сайт в Google sites и качете двата скрипта плюс редактирания файл с стилове. Копирайте адресите им и съответно ги заменете в кода на Slimbox 2, а него готов, допишете в шапката на вашия блог преди таг </head>.

Разлика в резултата не намирам между двата кода и принципът е същия. За единична снимка примерът е този:

<a rel="lightbox" href="адрес на снимката" title=""><img src="адрес на миниатюрата" alt="" border="0" /></a>

За галерия този: rel="lightbox[име на албума]".






до нови срещи   ^.^

23.07.2010 profruit 

12 Response to "Lightbox за Blogger"

  1. psydex Said,

    Как да направя подобен lightbox обаче при on-page-load , та да мога да поставя adsense code в него?

     

  2. Profruit Said,

    Здравейте,
    Не съм сигурен, дали ви разбирам правилно. Замисълът е при набиране на some_site.com, да изкача допълнителен прозорец, съдържащ рекламен код?

    Lightbox в случая не е удачен. Той трябва да се предизвика. Мисля, че ви трябва PopUp неблокируем прозорец. Разгледайте кода му (accesspopup.info/generator.php) и заменете съдържанието с вашия код.

     

  3. Admin Said,

    Здравейте, как да сменя "CLOSE X" със друга снимка "ЗАТВОРИ Х", "PREV" и "NEXT" ги замених, обаче никъде не виждам линка към "CLOSE X". Става дума за Light Box кода.

     

  4. Profruit Said,

    Снимката е closelabel.gif. Тя е описана в стил slimbox2.css и по-точно в идентификатор #lbCloseLink.
    На практика всичко е пред очите ви и се свежда до малко находчивост.

    поздрави

     

  5. Admin Said,

    Не намирам никъде в кода за Lightbox идентификатор #lbCloseLink нито closelabel.gif. Може ли малко разяснение, че не съм много на "Ти" с програмирането и може аз да бъркам някъде.

     

  6. Profruit Said,

    Спускате се по темата надолу. Стигате заглавие "Slimbox 2 за Blogger". Следва уводни думи, после код, а веднага след него, цитирам:

    Файл-скриптове и файл-стил можете да изтеглите от тук:
    slimbox2.js
    slimbox2.css

    изтегляте slimbox2.css на вашия диск. Отваряте го с редактор и търсите (Ctrl+F) идентификатор #lbCloseLink или с ключова дума closelabel.gif. Стигате въпросния идентификатор и пишете адреса на вашата снимка. После редактирания slimbox2.css зацепвате в главата на html-документа, както е показано в кода и сте готов.

    А сега намере ред "Картинките можете да изтеглите от тук:". Виждате по ред три картинки. Последната в дясно е closelabel.gif. Как ще я преведете в графичен редактор и под какво име е ваше дело, но не забравяйте за него при указване на пътя в slimbox2.css.

     

  7. Admin Said,

    Да но аз използвам на блога ми кода за Lightbox, а не за Slimbox. Трябва ли да въведа кода за Slimbox и да изтрия този за Lightbox?
    Мерси предварително и се извинявам за глупавите въпроси!

     

  8. Profruit Said,

    Здравейте отново и поднасям извинение. Машинално съм отговорил, счел че ползвате моя вариант - с Slimbox 2.
    На практика те са сходни и при мен този работи без конфликти. А сега по ред.
    При Lightbox въпросната снимка се намира в джаваскрипт. За целта погледнете горния код и се спуснете на ред 30. Там има линк към blogergadgets.googlecode.com/files/lightbox.js

    изтеглето го и го отворете. Спуснете се на ред 50. Там е адреса на въпросната снимка
    lh6.ggpht.com/_u4gySN2ZgqE/SnWk6BjcF_I/AAAAAAAAAjw/3T1l6bZxGas/closelabel%5B4%5D.gif?imgmax=800

    За Slimbox 2.
    Да, започнете на чисто. Изтрийте оредния и въведете кода на Slimbox 2.

     

  9. stoineff Said,

    С предложения скрипт можете да създавате фотоалбум. Достатъчно е да подберете нужните снимки и да допълните атрибута по показания начин - rel="lightbox[име на албума]".

    Може ли да поясните как са изберем снимките и къде в кода да допълним атрибута.. Благодаря!

     

  10. Profruit Said,

    Създайте контейнер (div). Напълнете го с симки. Контейнера стилизирайте чрез CSS. Погледнете още веднъж "Фотоалбум Тел Авив".

    Кодът е този, а името на албума вашия ник, например.

    <div class='some_name'>
    <a rel="lightbox[stoineff]" href="адрес на снимката" title=""><img src="адрес на миниатюрата" alt="" /></a>
    <a rel="lightbox[stoineff]" href="адрес на снимката" title=""><img src="адрес на миниатюрата" alt="" /></a>
    ...
    ...
    ...
    <a rel="lightbox[stoineff]" href="адрес на снимката" title=""><img src="адрес на миниатюрата" alt="" /></a>
    </div>

    успех

     

  11. stoineff Said,

    Благадаря! Сега ще опитам, но смятам, че ще се справя вече :)

     

  12. Unknown Said,

    Здравейте! От скоро създам(оформям) своя сайт обаче изчетох целия интернет и не можах да разбера как да кача снимките си в моя blogger сайт чрез picasa web album.
    Искам да ги кача като слайд шоу или стандартно публикуване. това с качването в пикаса уеб и създаване на код го направих, но нищо не разбрах по въпроса какстава и какви са стъпките за качване в блогър. Много ще съм ви благодарен ако ми разясните подробно всяка стъпка!
    Благодаря предварителен!

     

Публикуване на коментар

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: openHAB, Ubuntu, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога