Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Wednesday, 16 March 2011

ajax/javascript/flash image galleries

Here are some really good and popular image galleries that you can use in your web pages. All of them are free, however some do have Creative Commons licenses, so read carefully if you are thinking of monetizing your sites in future. All websites contain step by step tutorials on how to setup and customize the galleries, however most of them will require you to get your hands dirty, meaning you have to go into the code.

Ajax Galleries 
Lightbox (most popular, slick and cool design)

Javascript Galleries
Highslide (personal favorite, very customizable, probably requires the most coding among these)

Flash Galleries

Will be updated... Check back for more soon.

.................................................................................................................................

image based menus

Look on the left column right here on this site and you will see that the pages menu now has image buttons with rollovers instead of just plain text ones. This was done with a code generated here:
So easy it is almost ridiculous!

































Once you have the code, go to Design and add an HTML/CSS gadget to one of your columns, paste the code, save - and you are done!  (Tip:  Needless to say, you can make more than just 3 buttons. The generator gives you 5 to begin with anyway. However if you have even more than that, simply copy paste the lines from the script and change the image and destination URLs in the added lines.  

Some other nice stuff too on this site by the way, such as a pull down menu generator, a pop-up window maker, a story generator - gotta love this one! :-), lots of image effects, text effects, and and...

http://javascript.internet.com/

.................................................................................................................................

Saturday, 12 March 2011

auto-cycling backgrounds

If you want to have multiple backgrounds on your blog that randomly appear on every refresh, then you should add the following javascript code in this way:

Go into design, then into page elements, choose add a gadget, from the pop-up menu select HTML/JavaScript, there is no need for a title, into the content area copy/paste the following code:

<script type="text/javascript">
var banner= new Array()
banner[0]="image1.url"
banner[1]="image2.url"
banner[2]="image3.url"
var random=Math.floor(3*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

Additional important notes:
  • image1.url, image2.url etc. shouldbe changed with the actual url of your image.
  • if you have more or less images you can adjust the number accordingly, keeping the same style in mind either by deleting extras or creating "banner[3], banner[4]" etc. You also have to adjust the number in red and make it equal to the number of images that you are using.
  • if you are using small images which should repeat themselves such as textures for backgrounds, then you should replace "no-repeat top left" with "repeat center center"
.................................................................................................................................
Girls Generation - Korean