JQuery Image Zoom էֆֆեկտը Blogger-ի համար

Ինչպես ամեն օր, այնպես էլ այսօր կփորձենք միասին Blogger-ում տեղադրել որևէ հետաքրքիր կոդ: Հաշվի առնելով այն, որ էլ-փոստում և մեկնաբանություններում հաճախակի եմ ստանում հարցեր՝ Blogger-ում նկարներ տեղադրելու մասին, որոշեցի այս նյութը նվիրել նկարներին:

Այս կոդը հատկապես կարող է օգտակար լինել այն բլոգներին, որոնցում շատ են նկարները և հատկապես բարձր որակ ունեցող նկարները:

Դուք կարող եք նկարները տեղադրել փոքր չափերով, իսկ օգտվողները կկարողանան այն տեսնել իրական չափերով:

Նաև նշեմ, որ կոդը տրամադրել է JQuery.com կայքը:

Եվ այսպես անցնենք գործի: Նախքան որևէ փոփոխություն անելը կրկնօրինակում ենք բլոգը: Եթե չգիտեք, թե ինչպես դա անել, ապա կարող եք օգտվել այս նյութից:

• Քայլ 1-Ավելացնում ենք Css կոդը: Մուտք են գործում Blogger-ի կառավարման էջ և կատարում ենք  այս քայլերը՝ Design > Edit Html կամ (Шаблон › Изменить HTML>Расширить шаблоны виджета): 

Վեևի քայլերը կատարելուց հետո գտնում ենք ]]></b:skin> կոդը:

]]></b:skin>

Այս կոդը գտնելուց հետո, նրա անմիջապես վերևում տեղադրում ենք ներքևում տրված Css կոդը:

#easy_zoom{

width:600px;

height:400px; 

border:5px solid #eee;

background:#fff;

color:#333;

position:fixed;

top:35px;

left:50%;

overflow:hidden;

-moz-box-shadow:0 0 10px #555;

-webkit-box-shadow:0 0 10px #555;

box-shadow:0 0 10px #555;

/* vertical and horizontal alignment used for preloader text */

line-height:400px;

text-align:center;

}

Զգուշացում-դեղին գույնով նշված թիվը փոփոխում ենք ըստ բլոգի էջերի չափսերի:

• Հաջորդ 2-րդ քայլում արդեն փնտրում ենք </head> կոդը և ավելացնում ենք JQuery կոդը: Կոդը գտնելուց  հետո ներքևում տրված կոդը տեղադրում ենք անմիջապես նրա վերևում:

</head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<script src='http://suyb.googlecode.com/files/easyzoom.js' type='text/javascript'/>

<script type='text/javascript'> 

$().ready(function() { 

$(&#39;a.zoom&#39;).each(function(i) { 

$(this).easyZoom();

}); 

}); 

</script> 

Այս երկու քայլը կատարելուց հետո պարպանում ենք կաղապարը և անցնում ենք առաջ:

• Վերջին՝ 3-րդ քայլում արդեն պետք է ավելցանենք այսպես  կոչված նկարի  «շարժիչ» կոդը:

Հիմա արդեն յուրաքանչյուր անգամ, երբ բլոգում կտեղադրեք որևէ նկար, պետք է նկարի հասցեն տեղադրեք ներքևում նշված կոդի մեջ:

<div class="separator" style="clear: both; text-align: center;">

<a class="zoom" href="Այստեղ տեղադրում ենք նկարի հասցեն" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="Այստեղ տեղադրում ենք նկարի հասցեն" width="320" /></a></div>

*Կոդի մեջ գույներով նշված թվերը, նկարի չափսերը փոփոխելու համար են: