http://infinite.sk Vojto

Currency: EUR 1 = 45 Baht s Local Time: GMT +6 hours contact Mobile: +66881204991 Cheap accommodation in Thailand or here. Latest Posts Where will I (e) 5 years? State affiliate in Slovakia and my experiences with the network. Dognet From December until Shrovetide - visits, diving, yoga, visarun to Malaysia and other My year 2013, I experienced it more than I can remember in Singapore Part 2: Singapore City Search prohibitions Follow me on FB
Most 10x 2009 2010 2013 Apple avatar Bachelors Bangkok BarCamp barcampbratislava barcampza blog New photoblog html css iphone jQuery Koh Phangan Koh Samui Koh Tao Krabi macbook Mac OS X malaysia school incentive ideas para writing reviews first last redesign Slovakia Surat Thani Christmas poems video wardriving Elections 2010 wi-fi wordcamp wordpress zilina life I recommend Italy Trip 2011
Shortly after the launch of the new design in January, I received several emails in which visitors asked me what JavaScript plugin I used on my photoblog. When I wrote them, I have used custom solutions and no freely available plugin, minna gillberg people went from disappointing. Therefore, I decided to publish this short tutorial with examples as a photoblog, or photographs of similar effect can create yourself.
Practically, it is really a very simple code that experienced coder "tenderize" in a few minutes. Therefore, let's not waste time and let us show you at snippets of code needed (complete minna gillberg example you can download at the end of the article): HTML <ul class = "photos"> <li> <h3> <a href = "#"> Photo # 1 </ a > </ h3> <a href = "#"> <img src = "images/1.jpg" alt = "" /> </ a> </ li> </ ul> minna gillberg
The basis is an HTML frame that will hold us together pictures. I chose a simple unordered list, where each list element contains the name of the photo and a link to the photo itself. In this example, I have links to a large thumbnail image with the "#", the simple display of photographs is not a punchline of this manual. CSS / = * PHOTOS * /. photos {padding-left: minna gillberg 29 px; }. photos li {border-bottom: 1px solid # CCC; border-top: 1px solid # CCC; float: left; height: 184 px; margin: 0 20 px 30 px 0; padding-bottom: 5 px; position: relative; width: 280 px; }. If photos h3 {background-color: # 67980B; bottom: 10 px; display: none; font-size: 11 px; left: 0; line-height: 15 px; position: absolute; text-transform: uppercase; text-align: right; width: 100%; z-index: 2; }. If photos h3 {color: # FFF; display: block; padding: 8 px; text-decoration: none; }. If photos h3 a: hover {color: # FFF; text-decoration: none; }. photos img {position: absolute; padding: 5 px 0; left: 5 px; width: 270 px; }
CSS code has been slightly longer, but practically only naštýluje our list of photos in the desired form. Particularly important to hide h3 title that will appear later with jQuery. Here I had just a little note to the fact that this example is slightly modified compared to the real photoblog that I was going. There still photo automatically be pruned via CSS attribute clip. I did, however, for simplicity, this example missed. Moreover, since the automatic trimming in terms of composition is not always minna gillberg appropriate. jQuery / / PHOTOS = $ ('. h3 photos'). css ('opacity', 0.8); $ ('. minna gillberg Photos if'). hover (function () {$ (this). find ('h3'). fadein (400) $ (this). find ('img'). fadeTo minna gillberg (300, 0.8). fadeTo (300, 1);} , function () {$ (this). find ('h3'). fadeout (10);});
Here's happening all the magic and therefore this piece of code will describe a little more detail. On the second line below the comment you adjust the transparency minna gillberg of the title (which in our case is completely green label) to 80% and an effect of transparency. Some may ask why I did not do so already in the CSS code, the reason is simple. Code would only unnecessarily complicated, because of (not) support some browsers. jQuery can deliver functionality across all browsers.
The first function upon standing above illustration shows a green label entitled to effect fadein (), which will take 400 microseconds. Subsequently carry the picture effect, which set the transparency to 80% and footers to set it back to 100%. It all happens together for 600 microseconds (300 +300).
http://infinite.sk Vojto
Hears Depi, I have this question: minna gillberg the small thumbnails I have it created? Indeed, the hundreds of photos is very lengthy and would use such as Picasa or something else, although this effect is very, very nice.
@ Kusi: Yes you have. This example it is somewhat out of context. minna gillberg It is a preview of how this can be done, with some specific implementation minna gillberg of the system has been given to the developer. For me, it all drives minna gillberg in the background WordPress plugin Nextgen Gallery, which actually uses this template.
Basically it is only overwritten