7 Preview Image and text effect Posted by vuluganck | at Saturday, June 06, 2009

Hi every body, at the previous posts, I have introduce to you and show you how to make some kinds of image effect such as Auto Zoom, FancyZoom...Very cool, and now I will show you and guide you how to make 1 more effect for the images, it is very useful that you don't have to use zoom anyway.

That's called Preview Image and Text.The name is so simple that you will understand now.

As it name, the image will automatically open its default size when you hover on the resized image.

• Demo is below


• Download the file

• I'm a text Tooltip. Hover over me for an example.


• And me, I'm an Image Tooltip. Hover over me to see an image.


• 


• 

Let's start:
1.Log in your blogger account, view your source code and add this code before the ]]></b:skin>

#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
color:#fff;
}

#tooltipList ul
{
margin:0px;
padding:0px;
}

#tooltipList li
{
display:block;
margin-bottom:20px;
}

2.Next download the file I gave you at top post.
You will see 1 js file name preview.zen.js, upload it to your favorite host to get the direct link, I will show you some hosts that you can upload:110mb.com , hotlinkfiles.com

After you upload it, add this before the </head> tag:

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='preview.zen.js' type='text/javascript'/>

Paste the direct link to the file preview.zen.js and paste instead of the red code.

3.The last step, when you publish a new post and want to use the Preview Test and Image, add this code :

<div id="tooltipList">
<ul>
<li><a class="tooltip" rel="Glimmer is great! Thanks MIX Online and Zenplate to bring this to you.">I'm a text Tooltip. Hover over me for an example.</a></li>
<li><a class="tooltipImage" rel="http://i651.photobucket.com/albums/uu240/zendersto/ico_045.png">And me, I'm an Image Tooltip. Hover over me to see an image.</a></li>
<li><a class="tooltip" rel="Get this tip on http://zenplate.blogspot.com"><img src="http://i651.photobucket.com/albums/uu240/zendersto/zenpreview.jpg" height="90" width="355"></img></a></li>
<li><a class="tooltipImage" rel="http://i651.photobucket.com/albums/uu240/zendersto/ico_046.png"><img src="http://i651.photobucket.com/albums/uu240/zendersto/previewzenplate1.jpg" height="90" width="355"></img></a></li>
</ul>
</div>

Or you can create a HTML/javascript to add this code,up to you.At this step,option it by your own info.
All done, Save all and join it.I hope this tip will be useful for you,if you like it please do me a back link for thanks.
And don't forget to subscribe,comment to me.
Zen


Requirements:Jquery
Website: http://visitmix.com/labs/glimmer/samples/tooltip.html
Author: MIX Online
Convert to Blogger: Zenplate

5 Auto Zoom image Posted by vuluganck | at Monday, June 01, 2009

Hello, today you will see the next tip about image effect using Jquery-Auto zoom image.As it's name, you don't have to click on it to enlarge the image, it will be automatically enlarged.I have published 1 tip about zoom image,too, it's called FancyZoom, it is very useful for you if you don't like this kind of image zoom tip.

• View live demo


• Download the file

You like that? But before we start, I have to tell you that you should use this tip just for small images.If you are the expert about Jquery with the function, you can option the style in the file you will download below. I will make it very easy here.


Log in your blogger account, go to your source code and find the ]]></b:skin> then add this code before it :

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}

Next, find the </head> tag and add 2 script before it:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="zenzoom.js">

/* Expando Image Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

</script>

Note: After you downloaded the file(click on "Download the file"button) ,extract it you will see the zenzoom.js file,you just have to upload this file to your favorite host such as 110mb.com or hotlinkfiles.com to get the direct link.
Ok you uploaded it ? now copy the direct URL and paste instead of the red code.Do not delete the credit or anything, if you delete, it will not work anymore.

Finally , you have 1 step left to be finished.When you post new article, add this code,just paste the URL link in the pink code:

<img class="expando vacation" border="0" src="Image URL here" width="100" height="66">

That's all, you have create the cool effect for your images,you love it ? Share this post to your friends and please do me a back link, I will very thanks if you do that.Have a gooday with this tip my friends.
Zen

Requirements: Jquery
Website : dynamicdrive.com
Author: John Scheuer
Convert to Blogger: Zenplate