Mi a fene ez?

Mi a fene ez?

Semmi különös, itt próbálom ki a cuccokat, mielőtt beteszem a többi blogomba... Ha jól működik, fent hagyom, hogy érte jöhessek, ha szükségem van rá máskor, de hogyha tetszik, nyugodtan viheted Te is! De mielőtt bármibe kezdenél, olvasd el a Tanácsokban leírtakat a modulok és sablonok sikeres használatának érdekében!

Közlemény!

Először is: sajnálom, ha nem válaszoltam a kommentedre, de sokáig nem jöttem a blogra, elnézést! Másodszorra pedig, mint láthatod új külsőt kreáltam a próbajáratnak, ezért néhány dolog lehet, hogy nem működik - hiába van feltüntetve néhány kódnál, hogy a demó látható az oldalon valahol -, mivel a sabloncserével néhány később hozzáadott kódrészlet törlődött. Majd pótolom lassanként.

Köszönöm megértésedet és türelmedet,
von Birken


Az oldal mentése PDF-be

2009. december 19., szombat

Kurzorérintésre előugró, linkelhető képek

1. lépés:

"HTML-kód szerkesztése"-fül, "Vezérlősablonok kibontása".

Keresd meg ott eztán a következőt:

]]></b:skin>


Elé illeszd be az alábbi kódot:

/* Blogger Zoom Gallery By AllBlogTools.com */
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(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}



Eztán ezt kell keresned:

</head>


Ez elé pedig ez kell:

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);

} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});
//Swap Image on Click
$(”ul.thumb li a”).click(function() {

var mainImage = $(this).attr(”href”); //Find Image Name
var url = $(this).attr(”title”);
$(”#main_view img”).attr({ src: mainImage, onClick : “window.open(’” + url +”‘);” });
// $(”#main_view img”).attr({ src: mainImage, onClick : “location.href=’” + url +”‘;” }); //

});

});
</script>



Mentsd el a sablont!

2. lépés:

Az "Elrendezések"-ben kattints az "Oldalelemek"-gombra, ott pedig a "Modul hozzáadásá"-ra. Váaszd ki a "HTML/Javascript"-elemet, majd másold bele a következőket:

<ul class="thumb">
<li><a href="LINK URL-CÍM" target="_blank"><img src="A KÉP1 URL-CÍME" alt="" /></a></li>
<li><a href="LINK URL-CÍM" target="_blank"><img src="A KÉP2 URL-CÍME" alt="" /></a></li>
<li><a href="LINK URL-CÍM" target="_blank"><img src="A KÉP3 URL-CÍME" alt="" /></a></li>
<li><a href="LINK URL-CÍM" target="_blank"><img src="A KÉP4 URL-CÍME" alt="" /></a></li>
</ul>



Ha több képet akarsz, akkor csak az alábbi sort kell megismételned, ahányszor csak szükséges:

<li><a href="#"target="_blank"><img src="IDE A KÉP URL-CÍMÉT!" alt="" /></a></li>


Ha oldalra akarsz hivatkozni képre kattintással, írd be a kívánt oldal címét a href="LINK URL-CÍM" részbe a LINK URL-CÍM helyett.

Valahogy így kell kinéznie, természetesen az általad megadott URL-címekkel:

<br /> <li><a href="http://egosumresurrectioetvita.blogspot.com/" target="_blank"><img alt="Ego Sum Resurrectio et Vita" src="http://lh4.ggpht.com/_gQdGruWbcA4/Svb_JJ-VBrI/AAAAAAAABi0/oMXai9X1mFg/Ego%20sum.jpg"/></a></li>

Bejegyzésen belül is működik!


Related Posts Plugin for WordPress, Blogger...