Yet again, here is another easy tutorial to modify your photos. This code will make your photos fade as their default state and as your mouse pointer come near to it the photo will reveal its full content. This feature is helpful in emphasizing single photo beyond others. Thus, I recommend this if you are using photos as categories with a linking site on it.
Reminders:
We will not use drag and drop for photos here.
Ok we begin with these very easy steps:
1. Download the gradualfader.js to this LINK. Once you found the file on the site just right click on it and choose “save link as”.
2. Go to Weebly > Design > Edit CSS/ HTML > Add new files > add now the file you just downloaded and also the photos you are going to use. Remember the name of the photos.
3. If you are done uploading, go to the <head> section. (help for editing <head> here)
4. Now paste the following code.
<script type="text/javascript" src="http://theweeblytricks.weebly.com/files/theme/gradualfader.js">
/***********************************************
* Gradual Element Fader- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
Change the bold text with your website address and hit save.
5. To insert an image with this effect you must do it using the “embed code” tool. Now drag one and use ANY of these sample code for your guideline:
Image only:
<img src=" http://theweeblytricks.weebly.com/files/theme/crying.gif" class="gradualfader" />
Image with link:<a href="http://www.dynamicdrive.com" class="anotherclass gradualfader"><img src=" http://theweeblytricks.weebly.com/files/theme/crying.gif" /></a>
Change the following:-Red marked text for your website address.
-Green marked text for the name of the photo. (It must be complete)
-Blue marked text is the target link when a photo is clicked.
Let me know if you like it guys!!
0 comments: