Great Photo Sliders Without a line of Script !

Two of the Best Image Sliders on the Web Requiring No Script !

The best two ( 2 ) Image Sliders I have recently stumbled upon requiring not a line of script nor any CSS - for your page !




I know that many of you would like an Image Slider for your site or page - but you're not that script savvy or you simply just dont want to bother adding more script on top of script . Ok, those days are now over . Now mind you , I am quite aware that there are several sites which offer embeddable slideshows for your page - such as Photobucket and of course there's Slide both sites offer various options for their slideshow's , such as different skins and Slide even offers the option of incorporating Media ( such as music ) into your slider as well .

However , there are some of you who might prefer something more professional looking on your page , possessing the capabilities of those so called Quiet Slide which run on JQuery script and are lightweight and dont seem to burden your page within loading time . These Jquery Sliders are sleek , and quite appealing as far as their presentation goes . However , as I mentioned above : some of you may not be Script Savvy and you dont want to go through all the fuss just to place a couple of pictures on your page ..I understand :)

Ok, here is image slider no.#1 - which is Fully customizable ! What does this mean ? well, ok it means this : It is customizable as far as its size ( width & height ) by setting the parameters . Secondly (#2 ) ,the size of the images is also customizable also and thirdly #3 : You can set the number for as many images you wish to display. Basically , this particular slider is a No Brainer and requires no effort , other than you locating the desired images you wish to display , customizing the size, number of images & finally generating the code , copying & pasting it unto your pages in the desired location . Now , this slider is for your Flickr albums / images / sets . However : here is a tiny little tip for all of you who may not be aware as to how to get this Flickr slideshow to work . I know that many of you may not have a Flickr account , or if you do have one - you may not have images uploaded , or you simply dont like your own images and want to use someone else's . This slider will work even if you do not have a Flickr account of your own , and the best part of this particular slider is : You don't have to sign up nor create an account to use it ! ( yes I know , you can thank me now ) .

I will tell you now how you can load someone elses' images unto this particular slider - and they can be any images you like . Take note however : You can only use a set of only One ( 1 ) user at a time - thus : if you want to display images pertaining to ex: Illustration , Digital Photography etc this week which belong to particular user - then you can do just that and the following week, you can choose to display images belonging to a different category and a different user . Ok, so we managed to get through that - now lets move on :)

Firstly , you will want to get to the Slideshow site , which is called Slideoo , once you do , please bookmark it so you will have it for future reference . Once you arrive at the said site , and have a look-over at this beautiful slider , you will open a new tab on your browser and go to Flickr ( and as mentioned previously : you dont need a flickr account ) .

Once you have taken the above two steps - you will now go through the Flickr process : finding images or a users images you wish to display . When you finally do find a set of images you would like to display , here is the next step you need to take : Look at the user's name . A users name is displayed at two places : either on the address ( browser address bar ) or by clicking their avatar and their user name will come up & also : if you choose a particular set of images , and of course it is always displayed right next to their user avatar . Now , you have found the images you like - and you've located the users name . You will now copy the users name from the address bar ( only the name - not the entire URL ),
and paste it into the the Slideoo box which says Enter your user name and click on either of the 2 options given : Use your sets |or | Your Photostream . Now if a user has many sets of images , what will happen is : all of their sets will come up on display on Slideoo . Choose the images from the set which you like , customize the settings ( width , height and image width as well : small , medium, large ) and click on Create your Slideoo. Your Slideoo slideshow will appear above-head where you will be able to see it's final outcome. If you are not happy with the size parameters you have set , you can easily change them again until you are satisfied with the results . Now once you are done and satisfied with what you see , you will see the embed code right there - all you need do is simply copy & paste . Go to your Edit , HTML , Page Elements , choose 'Add a Gadget ' HTML/Javascript and paste the embed code into that - hit save and your slideshow is now on your page ! Now wasnt that simple enough ?

Here is the Slideoo slider for you to sample , the size parameters of the slider are 400 width & 170 height ( height is automatically set by the generator once you choose the width of the slider and the image size - which in this demonstration is set at " medium" ) . What do you think ? Nice huh ?

Now , the slider is not automatic - a user must click on the + & the - button's which are located to the left and the right of the slider to view the images . Once you click on any of the images you will be taken to Flickr and the particular user's album .

Ok , now that we have gotten Image Slider #1 out of the way , time to move on to slideshow no# 2. This slideshow is pretty much like a Beta slideshow within its functionality & appearance and basically looks like a Video . For generating this particular slideshow , you will need to activate an account - which will also come in handy in the future should you wish to edit or reformat your images . Of course I dont have an account with this particular site , therefore I cannot display what the slider looks like - however , here is the site where you can go to and everything regarding it's usability & functionality is explained to you live ! You can sign up for an account if you feel this is more to your liking and start building your slideshow . You can also incorporate your own mp3's into this slider ! It also gives you the option of using your own computer images or using images you like on the web by simply copying and pasting the URL . The final step once you are done is to once again , copy the code and paste it into the Page Elements ' Add a Gadget ' section & voila ! youre done . Here is the site offering the slider which is called Roxio Slideshow . So, I hope you will find these sliders useful and handy for your page . Enjoy & catch you here next time . Till then , keep smiling , Mootools & JQuery love you :)

Creating Image Hovers

Beautiful effect Upon Image Hover: Now you Can Create them Also !

I know that many of you visit a lot of beautifully designed web-sites and wonder : "Now how did they do that ? " . Well, to be honest : it requires a great deal of work , effort and an unlimited source of knowledge to achieve most of the effects you see on certain websites . These web Designers have spent a great deal of time sitting behind a desk , and they have also devoted a great amount of time reading codes !. No , I hate to break the news to you , but : Nothing comes easy & without a price : Time & Dedication to learning something you actually love .

Now I realize that your intention is not set on becoming another Computer Wiz Kid Genius as the likes of Bill Gates or " Mr. Apple " himself Steve Jobs [ Exec. C. E. O , Sun Systems & borderline Genius ] - therefore I will not torture you with detailed source codes and the like . I realize that most of you just want a nice looking page , with a few Tweaks ( per say ) ; and before I get to the meat & potatoes of this next little handy code here , I would like to inform any one of you passing through this page [ blog site ] , that if you require deeper & more complex codes , help with tweaking , or just a simple Template , please do yourself a big favor and go directly to the Source Code & Design Guru who offers all of his services FREE , and will respond to all and any questions you may have regarding complex codes , tweaks and anything Web Related to suit your needs . he will respond to your inquiry or problem immediately ( believe it or not ) . Visit his site & you will asses for yourself that I am not over-exaggerating . His name is Zen , he is 18 yrs Old and one of the best designers of his age group , and also the sweetest young man you will have the priviledge of meeting . His site is also on Blogger , so please once you get there , don't forget to bookmark his site for future reference & if you'd like , you can join - after all : there's no Fee and it's Free ! . Now how many things in this life are free ? hhhhmmmm..not many , since I checked lately . So, here you go - once you finish reading this , head on over to Zen and browse everything he's got to offer all you Bloggers out there in cyberspace .

Now , lets get down to the meat and potatoes of our present situation . So, you've seen some sites with some really nice effects , such as : when you hover [ pass your mouse ] over a link or an image they light up or change a different color and you want to achive the same effect but you dont know how right ? Ok, this is going to be so simple - much simpler than doing your income tax , I assure you !
Why will it be so easy ? Because : I will not make you sit behind a desk for a couple of years , nor make you read codes ! Now isnt that nice ? All you will have to do is look at the example below , hover [ pass your mouse ] over it , and once you stop marveling at it , you can just copy the code I will place here , insert your own images ( plural ) and just paste into wherever you want the image to appear [ such as an HTML Add a Gadget in your Page Elements section ] or directly into your Page Source HTML , ( if you really know what you're doing ! ). Ok, now that we have gotten the logistics out of the way let's move on .

Look at the image example below , and hover over it to see what an image Hover is :

When attempting to create an image hover , we require 2 separate images - always ! Look at the 2 separate images used here for our example :

Our First image must be a B& W image , or any other color of your choosing :




<img src="http://img145.imageshack.us/img145/4613/79181073.png"/>






Our Secondary Image must be a color image , and that can also be any other image color you wish to effect:

<img src="http://img261.imageshack.us/img261/2292/27094269.png" border="0">

Now by combining both of these images and giving them a command line of code such as onmouseover and onmouseout our two images take on a different light ( if you will )
Now for the instructions of how to apply which image & where , and then you can just copy the code and replace the images above with your own :

<a href="http://YOUR_URL_HERE.com" onmouseover="nameyourimage.src=
'http://img145.
imageshack.us/img145/4613/79181073.png '" onmouseout="nameyourimage.src='
http://img261.
imageshack.us/img261/2292/27094269.png'"
><br /><img src=
"http://img261.imageshack.us/img261/2292/27094269.png" name="nameyourimage" border="0" /></a>

Do you see the different colors & the images that apply to them ? This means that you will repeat the " Blue Image Code " twice , and the " Pink Image Code " once , then all which is left is the " Orange Image Code " if you wish to apply a link to your image . Therefore , take an image of your choice , any image . One image , the Pink Code , must be a B& W image . The secondary image in Blue , must be a color image , and this will be the image which will be displayed upon link hover . You can find images as well as an image editor to achieve the color stripping of images @ such places as , Photobucket as well as a more advanced Online Image Editor such as Blibs . Once you have prepared the image of your choice , just copy the resulting URL 's and paste into the appropriate provided colored codes here. Copy and save the above code to your Notepad in your email for future reference until you know it well & have no use of it any longer . I will not bother to give you the CSS version of this code , we shall save that for next round . Now , go get your image and the code & apply some nice effects to your images . Have fun & smile - this could have been a JQuery code - and you wouldnt want that now would you ? Smile , Mootools & JQuery do love you ..really they do ! :)

External Site Image displayed upon Link Hover :

The problems of losing / erasing a piece of code

Well, yesterday I encountered a small little problem, and as I later discovered upon a wide google search it is not such a small problem and that I was not alone within my plight . Upon rearranging certain elements within my template , I accidentally ' erased ' a code . The code I eliminated was the code used to display and ' icon ' [ image ] of a site when you mouse/ hover over a link .

In other words : an ' image displayed upon a link hover ' . You can see what I'm referring to if you hover over a link right here on my own page .

Major problem indeed ! I usually tend to save all my codes in a folder , but I was tired and sleepless & forgot to do this entirely . End result : I hurled myself into a total panic ! I was now ' code-less ' and the " Code Guru " who had supplied me with the code was nowhere to be found . Within this panic , I began my quest into trying to find this code , so off I went into ' terra icognita ' : I began my google search for the javascript code which I could replace my lost code with . I went to the source guys over at Dynamic Drive and proceeded to go through their entire data-base of code sources .....nothing similar to the original code I had gotten from my 'Code Guru '. Nothing even remotely close .

I now began panicking even more ! I started searching every source site within the vestiges of cyberspace . Within this search of mine , I saw that I was not alone within this plight . There were probably hundreds of thousands of users out there being confronted with t his same little issue , and the question on every source site was basically the same : " does anyone know the code that displays an image when you hover over it with your mouse ? I've seen it on some sites and I cant find the code for it .." etc. etc. etc .

Yes , I now realized that this is a common issue with most users . Not many source sites have a code which produces an icon / image , displaying the image of an external site upon link hover . But ok , I will not keep you in suspense any longer , I will now tell you about the coveted script & where you can get it for your own site / blog page . Basically , you can get a lot of codes for most of your blogging needs & or page at the following site . And believe me when I say this : This guy is one of the " True Code Guru's " on the internet . He offers a lot of JQuery codes & tutorials concerning implementation . Everything he has on his site blog is a step by step instructional . In essense : you really dont have to do anything but copy & paste !

However , here now is the coveted code for displaying an external image upon link hover : Zen Plate. Once you get there , have a look around , you will surely find many other codes which you will definitely find useful for your page / blog . Although , be warned that : since Blogspot is not open source , many of these codes can suddenly disappear just like a puff of smoke . Therefore ; a word to the wise : Save your codes & your template source codes into an external folder ! Or else , you will be confronted with the same issue which " Yours Truly " experienced yesterday .

Well, I hope that the information provided has been useful /helpful for your blogging /web related needs . Have fun coding now , and remember to smile : Mootools & JQuery love you ! :)