Cum se face zoom deasupra pozei in Blogspot




Acest tutorial este realizat la cererea utilizatorului dommino1971 de pe site-ul MyExpert.ro
Tutorialul este despre cum se face zoom deasupa pozei in Blogspot / Blogger (zoom la mouseover, zoom la mouse hover).
Puteti vedea o demonstratie a acestui efect aici (pur si simplu plimbati mouse peste poza cu paunul).

Primul pas este sa intrati in contul Blogspot/Blogger si sa accesati categoria Layout. Apoi accesati optiunea Edit HTML si bifati Expand Widget Templates.

In casuta de editare a codului HTML trebuie sa cautati linia ]]></b:skin>
Exact inainte de acel rind, trebuie sa inserati codul de mai jos.
Dupa adaugare, apsati butonul Save Template.
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-8tUNMmf3Iv0AXmnDnWuK9J_wajRQ2JUi_HnXFwKFd7xCGs7zViw4N8OztxIGosxkwTBgM9NyN3tHXscXF-s0-Mk4qu-bqtpA0MLRZtXQm2zukdOsPBBWiRfSEyhcb6_U-yplTqLQqxeM/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Dupa aceea, in aceeasi fereastra de editare, trebuie sa cautati rindul </head>. De obicei este foarte aproape dupa rindul de mai sus.
Exact inainte de </head>, trebuie adaugat scriptul de mai jos. Din nou, dupa adaugare, apasati Save Template.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Larger thumbnail preview
$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);
} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});
//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {
var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});
});
</script>


In continuare, puteti sa adaugati o poza intr-un post (articol), dupa cum urmeaza: mergeti la New Post si adaugati textul urmator:
<ul class="thumb">
<li>
<a href="#">
<img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; DISPLAY: block; CURSOR: hand" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1kNjhhkYgQcd_YIevFMcHz8TOQMmhceT8LW88tFfaqQma9SSBcwN9dupWITDmXkKuDHT49I_fvvVaAjEUZlvh5BDkDhfcKbTRDNvMo7EGnrlkSsxtlkhkyqIxseRTWsZL_mZ57DMPw0/s320/DSC_0015.JPG" />
</a>
</li>
</ul>

Bineinteles ca trebuie sa puneti adresa spre poza dvs. (in loc de https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1kNjhhkYgQcd_YIevFMcHz8TOQMmhceT8LW88tFfaqQma9SSBcwN9dupWITDmXkKuDHT49I_fvvVaAjEUZlvh5BDkDhfcKbTRDNvMo7EGnrlkSsxtlkhkyqIxseRTWsZL_mZ57DMPw0/s320/DSC_0015.JPG)

Puteti vedea o demnstratie a acestui efect aici (pur si simplu plimbati mouse peste poza cu paunul).

6 comments:

Ecaterina spunea...

Buna, multumesc pentru tutorial, fost foarte usor sa ma ghidez dupa el. Dar mai am o nelamurire. Ce trebuie sa fac pentru ca fotografiile sa fie mult mai mari. Vreau sa realizez un blog cu fotografii si mi-ar place sa se vada mult mai bine. Ceea ce a iesit poti vedea aici: http://forever-foto.blogspot.com/

queensoft spunea...

Pentru marime mai mare a pozei trebuie sa cauti in scriptul al doilea aceste 2 rinduri:
width: &#39;174px&#39;,
height: &#39;174px&#39;,

Modifici cele 2 valori (174) si pui cit vrei mai mult

Ecaterina spunea...

As mai vrea sa modific ceva dar nu stiu unde. Fotografia cand apare prima data pe pagina este mica, as dori sa stiu unde pot schimba parametrii. Multumesc anticipat.

queensoft spunea...

Trebuie sa modifici in 2 locuri - cite unul in fiecare script:
- primul: width: 100px; height: 100px; /* Set the small thumbnail size */
- al doilea:
width: &#39;100px&#39;,
height: &#39;100px&#39;,

Vezi ca apare peste tot 100px, modifici si pui cit vrei acolo.
Sa pui aceleasi valori in ambele cazuri (de exemplu: width 250, height 300 - pui aceleasi la ambele scripturi)

Ecaterina spunea...

Mersi, nu a fost greu, la inceput credeam ca nu o sa reusesc deloc. Tin sa recunosc ca tu ai facut toata treaba. Indicatiile tale vor fi de folos si altora care vor fi interesati de acest lucru. Un week-end placut iti doresc.

Ecaterina spunea...

Aici puteti vedea cum a iesit prima mea fotografie realizata dupa acest tutorial.
http://forever-foto.blogspot.com/2010/05/capsunica-zoom.html