All-In-One Slider a jQuery plugin

jQuery has changed the way users interact with websites. jQuery Image sliders are become increasingly popular within webpages. I’ve created a Slideshow widget All-In-One. As I’m calling it All-In-Oneso I hope almost all jQuery slider features you will find here. And Of course some new features which you may find interesting.

a jQuery Plugin for image Slider

All-In-One Slider a jQuery Plugin

Features

  • Any types of content are possible to add.You can add Images, Plane text, Html content, videos what ever you want to slide
  • Display Multiple Items TogetherYou can display multiple items in column or row direction. So in a single box people can see multiple items together. Usually very useful in product display purpose.
  • Display your content in Two Dimensional ViewYou can give All-In-One slider a two-dimensional view. All you’ll have to do is add Column and Row number. How many column and row you want to use per movement.
  • Accessible Auto-Playing Slideshow Feature.Auto-playing feature included. Which is user accessible You can change auto play directions. Like Left to Right or Right to Left etc also you can disable auto-playing slideshow option if you don’t like it.
  • Number Of Items Move/Scroll Per Click/MoveYou can control the number of items which you want to scroll per click or when auto-play is going on. Just like in jCarousel.
  • Animation Speed Control.You can control animation speed. So if you want to move your content Faster/Slower you can adjust it.
  • Mouseover Pause During auto-play if you want to see what is the item is then just move your mouse over the item and autoplay will pause.
  • Overlay Caption For ImageYou can add a overlay caption with images, for showing title or meta content.
  • All Options are OptionalYou can just add more than a few words $(DIV NAME).all-in-one({}); to make All-In-One slider works, if you don’t have much time to add options. It will work fine. Although options will make it perfect πŸ™‚

How to Make this Work

  • HTML Markup


<!-- All-in-One Slider's HTML Markup -->
<div id="any_name">
<div id="another_name">
<ul>
	<li><img src="myImg/01.jpg" alt="" /></li>
	<li><img src="myImg/02.jpg" alt="" /></li>
	<li><img src="myImg/03.jpg" alt="" /></li>
	<li><img src="myImg/04.jpg" alt="" /></li>
	<li><img src="myImg/05.jpg" alt="" /></li>
</ul>
</div>
</div>

  • CSS


/* All-in-One Slider's CSS */
#allinone-frame{
width:500px;
height:238px;
margin:0 auto;
background:#242424;
overflow:auto;
}

#allinone-content{
position:relative;
margin:0 auto;
width:60%;
color:#fff;
background:#3d3d3d;
}

#allinone-content ul{list-style-type:none; }

#allinone-content li{ margin:8px; float:left; }

/* change width or height value if you want */
#allinone-content li img{
width:256px; height:192px; /* (important) need to be same as your images width & height */
}

#allinone-meta-content{
height:40px; position:relative; margin-top:-46px; color:#fff; background:#000;
font-size:11px;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity:0.6;
padding:2px;
}

#allinone-meta-content p{font-size:15px; font-weight:bold; padding-left:2px;}
#allinone-meta-content span{position:relative; font-size:11px; color:#e4ff00; padding:2px; font-style:italic;}

  • Script

// All-in-One Slider's jQuery script

// add jquery library
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>// add All-In-One version 1.0<script type="text/javascript" src="jquery.allinone-1.0.js"></script>

$(document).ready(function() {
$('#allinone-frame').allinone({
    autoPlay:true
});
});

Options

In order to make All-In-One looks like your own you can add some options. like..

columnNo : 1, //[1,2,3……; default 1] number of columns, each column hold one item
rowNo : 1, //[1,2,3……; default 1] number of rows, each row hold one item
itemMove : 2, //[1,2,3……; default 1] number of item scroll per click / move
Speed : 1000, //[in milliseconds] animation speed
autoPlay : true, //[“true” or “false”] auto play disable or Enable
animDir : “left2right” //[“left2right” or “right2left”] change animation direction

Questions?

If you face any problem or find any bug please feel free to contact me. Just leave a message here or mail me. I hope you will enjoy it.

VIEW DEMO

DOWNLOAD IT (812 Kb)

Advertisements

UPTODATE

My new site UPTODATE. Finally I finished it!
Now I want to know what you are thinking about my site. Did you like it? πŸ˜•
So who want to be uptodate with me. check this out UPTODATE.

My new Site UPTODATE

My new Site UPTODATE


Virtual FS :: New Website Launch

Finally πŸ™‚ I’m so much happy and excited to annouce the launch of my new site Virtual FS (VFS). It’s a Design, Portfolio and all about my artwork and enjoyment where I will get in touch with my clients and as well as my cutie, sweety , lovely friends and viewers. The main theme of Virtual FS is bring some different in my design. Those who already went my previous sites they can compare the differents of Virtual FS. Now this is an experimental version of VFS , Later will add more features……….
Don’t forget to give me a shout or comment . simply click VirtualFS.

Virtual FS Screenshot

Virtual FS Screenshot


Captcha Breaking :: Getting Naughty Once Again

Breaking CAPTCHA: Getting Naughty with Computer Vision……. And Captcha Breaking Experiment in PHP…. These terms now familiar to us. 1st one was made possible by Nadim vai and 2nd one by M. M. Rifat-Un-Nabi. Their post makes me inspire to get naughty once again more simply and more easily. Because I like simplicity ;). I also choosed SomeWhereInDhaka.Net Captcha to do this experiment.

P

That Captcha Which made me Naughty πŸ˜›

The SomeWhereInDhaka.Net CAPTCHA suffers several weaknesses: fixed font face, fixed font size, no distortions and it’s easy to segment. In this experiment, I have developed simple algorithm to break the SomeWhereInDhaka.Net CAPTCHA.

  1. At first need the captcha image from the page, We can do it in two way :

    (a) capturing only the captcha portion [I have used php function: imagejpeg()] or,

    (b) capturing the page image by php function and then crop only captcha portion from that page.

  2. So, we got that captcha. Now sampling that captcha image
  3. Match sampling pattern with reference pattern. If matching is true then it will give output, In this case the captcha value. (No need any edit distance algorithm)

I wrote a PHP+JavaScript code to implement this algorithm, which can read captcha and can fill up the form with out any human interaction.

Get Captcha Value with php

Get Captcha Value with php

And finally in bot section again JavaScript proved that its cool than anything.
I used simple JavaScript code which just read the HTML Tag and fill & submit the form automatically.

auto fill up the form by my bot

auto fill up the form by my bot

You can see the effect here.

I post my website ads πŸ˜› as spam. So, isn’t it more simple.

And finally a sympathy will goes for SomeWhereInDhaka.Net. And also I would like to thanks them because they not change there captcha yet. and it help me to make this experiment :D. So, my friends if wana see weak captcha then what are you waiting for – just log in to SomeWhereInDhaka.Net and keep getting naughty :P.


Make Vampiric hand for webpage

During the developing my homepage which is virtual FS, I was tried to bring some vampiric design on it. So, for that purpose I have create a hand which holding an old paper. I think it looks like vampiric :D.
It is very simple and it tooks only 20 min . Now.. lets see how it was happen…..

Hand Sketch:

At first I make a Hand sketch using normal Pen tool in PS. then after finishing sketch it looks like this…

Hand Sketch

Hand Sketch

Then its time to fill hand sketch with appropriate color. I choose #E9CF9B value for hand color.

Fill with Color

Fill with Color

Nail sketch And Add Shadow

Then Sketch nail and also fill with color #A38D1E. Then adjust color brightness, contrast, saturation, gradient map, curves; here I used
a parabolic curve. Then it becomes ….

Shadow and Nail

Shadow and Nail

Make Realistic

Now its up to you. How more and more realistic photo you can make.:)
I chooce an old paper and bring my hand art on it.

Final Touch

Final Touch

Finally I add this in to my homepage.

Virtual FS Homepage

Virtual FS Homepage

And thats it ……………… enjoy πŸ˜‰


“FS MUSIC MANIA” facebook app.

I think all of us know about facebook. A social networking site. Accoriding to Global Alexa page ranking Facebook postion is 5th. In my point of view, the best part of the facebook is facebook developer app. Its makes FaceBook more different and resouceful for developer.

Yestarday night I have spent some hours in FB APP. And I found some interesting and enjoyble variant-evolved subset of HTML FBML (FaceBook Markup Language), FBJS (FaceBook JavaScript) . I have developed a musical App which is
FS MUSIC MANIA. This is a musical application. People can listen music by using this app.

FS MUSIC MANIA Home page

FS MUSIC MANIA Home page

You can invite your friend. I have used FBML tagΒ <fb:multi-friend-selector> Which will allow you to invite multiple friend.

Invite your friend

Invite your friend

You can also add a profile box for FS Music Mania, in to your profile.
For this purpose simple need to add

$facebook->api_client->profile_setFBML(NULL, user_id, ‘profile’, NULL, ‘mobile_profile’, ‘profile_main’);

Then it will be like this………….(pic from fsmania)

Profile Box for FS Music Mania

Profile Box for FS Music Mania

So, Keep rocking with music and give me your feedback about FS Music Mania.
http://apps.facebook.com/fsmania/ πŸ˜€


Peculiar message “Out Of Memery(OOM)”

A few days ago, some of my friends inform me , when they open my site www.engr-faisal.co.nr in IE7 or higher(in beta version) then their browser giving a message, which is “Out of memory at line ##”.

OOM showing in IE7( Vista OS )

OOM showing in IE7( Vista OS )


OOM in IE8 (BETA) and OS XP

OOM in IE8 (BETA) and OS XP

Actually I use Opera 9.23 as my default browser and also IE6 and others. But I never faced this type of problem. Even my site working pretty nice with all browser except IE7.

Actually “Out of memory(OOM)” case in modern computers when the operating system is unable to create any more virtual memory. If all of its potential backing devices have been filled. Such a system will be unable to load any additional programs and since many programs may load additional data into memory during execution, these will cease to function correctly.
The Operating systems such as Linux will attempt to recover from this type of OOM condition by terminating a low-priority process, a mechanism known as the OOM Killer.

This behavior can occur if the desktop heap in the WIN32 subsystem is depleted. Because in Windows NT 3.4’s default heap size is 512K , and 3072K in case of Windows NT 3.1.

Now how to remove this OOM message :(?
Okay .. To correct this problem, we may increase the size of the desktop heap. But before do this you have to know, how to modify the registry. Otherwise it can cause serious problems if you modify the registry incorrectly. For more information about how to back up and restore the registry you can read this article.
Now get ready………………

  • Run Registry Editor (simply open RUN window, then type regedit).
  • From the HKEY_LOCAL_MACHINE subtree, go to the following key: ->System->CurrentControlSet->Control->Session Manager->SubSystems
  • Select the Windows value.
    From the Edit menu, choose String.
    Increase the SharedSection parameter.
  • For Windows NT:
    SharedSection specifies the system and desktop heaps using the following format:
    SharedSection=xxxx,yyyy
    Add “,256” or “,512” after the yyyy number.
  • For Windows 2000, Windows XP, and Windows Server 2003:
    SharedSection uses the following format to specify the system and desktop heaps:
    SharedSection=xxxx,yyyy,zzz
    Increase the zzz number to “256” or “512.”
  • Hope this will help to prevent OOM.:)