Punta de Choros

27 декември 2009

На 2009г й оставаха 120ч съществуване. От календара падна поредния лист с дата 27 декември и към 10.30ч сутринта ме събуди звън от телефона.

Инсталация на Microsoft шрифтове в Ubuntu 16.04

14 януари 2017

нсталация на Microsoft шрифтове в Ubuntu се поражда от идеята браузърите в различните системи, да показват еднакво текстовото съдържанието на интернет страниците.

Ubuntu 16.04 инсталация на USB disk on Key

19 ноември 2016

Арсеналът ми от мобилни компютри съдържа Fujitsu Lifebook AH530. Това е бюджетна машина от 2011г на Intel Core i5-480M процесор и 4GB DDR3 RAM памет.

gparted

Paragon ExtFS for Windows

30 юли 2016

ExtFS for Windows е утилита на Paragon Software разработена през 2013г. Тя представлява решение, предоставящо пълен достъп на четене и на запис до раздели ...

msvcr100.dll is missing Windows 10

04 октомври 2016

Майк Патерсън от Plixer, компания по компютърната сигурност, публикува доклад , че Windows 10 изпраща данни в криптиран вид от вашата машина на всеки пет минути. Той е направил максимума, за да спре изтичането, но системата продължавала да изпраща информация.


Площадката на 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="http://2.bp.blogspot.com/_7-catI9Zvzg/TEm0hNkaCTI/AAAAAAAACqs/HDpys8_xcss/s1600/code.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_7-catI9Zvzg/TEm0hNkaCTI/AAAAAAAACqs/HDpys8_xcss/s320/code.jpg" /></a>
</div>

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

code

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

Това е кодът, управляващ снимката.
<a href="http://2.bp.blogspot.com/_7-catI9Zvzg/TEm0hNkaCTI/AAAAAAAACqs/HDpys8_xcss/s1600/code.jpg" target="_blank" title="profruit корекция"><img border="0" alt="code" src="http://2.bp.blogspot.com/_7-catI9Zvzg/TEm0hNkaCTI/AAAAAAAACqs/HDpys8_xcss/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(http://lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5B3%5D.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5B6%5D.gif) 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. Здравейте! От скоро създам(оформям) своя сайт обаче изчетох целия интернет и не можах да разбера как да кача снимките си в моя blogger сайт чрез picasa web album.
    Искам да ги кача като слайд шоу или стандартно публикуване. това с качването в пикаса уеб и създаване на код го направих, но нищо не разбрах по въпроса какстава и какви са стъпките за качване в блогър. Много ще съм ви благодарен ако ми разясните подробно всяка стъпка!
    Благодаря предварителен!

     

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

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

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