Looking for jQuery 3D image slider?

You found one. I was looking for same when I was doing this website, but couldn’t find anything like that, so I just wrote one myself and you can see the demo on the homepage.

Recently I’ve worked on it a bit more and made it even more customizable. So now it’s available as a jQuery plugin and you can easily download it here as a zip.

As I didn’t see one like this I decided to put it to the GitHub and this is my first Open Source project to share with the world. I’ve been using tons of Open Source stuff in my life, so finally I can also contribute to the community. Feel free to fork it or use it in any way you want. I’m providing it under GNU LGPL which means you don’t have to worry about anything except of keeping my copyright wordings inside the script.

It’s not universal and I wasn’t trying to make a super heavy plugin, it displays exactly 4 images(but of course handles any amount) a time and with little effort could be modified to display any amount of them.

The usage is super easy the HTML holding all of your slides would look like this:

<div id="slideshow">
  <div><img src="imgs/1.png" border="0"/></div>
  <div><img src="imgs/2.png" border="0"/></div>
  <div><img src="imgs/3.png" border="0"/></div>
  <div><img src="imgs/4.png" border="0"/></div>
  <div><img src="imgs/5.png" border="0"/></div>
  <div><img src="imgs/6.png" border="0"/></div>
  <div><img src="imgs/7.png" border="0"/></div>
</div>

And the after including the jQuery and slider.js you just have to write this in the head:

<script language="javascript">
  $(document).ready(function(){
    $("#slideshow").dddSlider();
  });
</scirpt>

See full example once you downloat it.

Feel free to comment, contribute and ask any questions about it via the GitHub.

Enjoy! And I hope you’ll make some beautiful pages with it!

So as you see I finally found time to redesign my website.
It’s not that I wasn’t happy about the previous one, but probably I just wanted to have more flexibility than flash gives, and
especially when it comes to mobile devices. I had a window in my projects load and said myself go ahead make it…
So one month later it’s all up and here comes the story…

Submission
I submitted my website to a few Web Design Awards websites. Actually I respect only 3 of them which are:
thefwa.com – mostly they award Flash websites, but I anyway submitted there knowing that I won’t win the website of the day.
awwwards.com – that is thefwa for HTML/CSS based websites and the jury are experienced designers from around the world.
cssdesignawards.com – I believe it’s the second after awwwards, but that’s just my opinion.

Nomination
OK submission done. Money paid.
awwwards.com turned out complete designers, as my URL wasn’t added properly – I was filling the form and forgot to add http://, I mean it’s just one regular expression to check and update the URL, so my links still don’t work on their website. Whatever first experience is not the best…
thefwa and cssdesignawards came through pretty quick and my website been Nominated. This means some guys reviewed it and agreed that it’s worth looking at for the jury and their visitors. Few days later awwwards also confirmed nomination.
Cool I’m a nominated web designer now. I never won any award from them, but overall it’s not bad for the first time.

So what’s the deal?
The deal is fame, boasting, bragging and politcorrectness. That day that my website was considered in the awards I saw no competitors.
It’s easy as you see the websites nominated before and after you and approximately you can measure the selection.
However the GAY website won. It’s not “gay” as people use it as synonym to weak or bad, it’s a GAY MOVIE website.
I’m not trying to descriminate gays here, but that website had orange word gay on the black background which you can click and some
form from the left or bottom appears. The main design here was GAY. The jury said of course we are politcorrect we should give them a website of the day award.
Guys what’s wrong with you?
Another website that overcome me was the opera website. It wasn’t really looking good, but at least it was a website.
Oh then I realized Opera -> Social+Culture -> Politcorrectness. Gotcha!
I talked to my friend that day and said you know I know the secret how to won an award!
I said I’ll make a website with a Sakura tree(japanese cherry tree) and a red sun.
Under that I’m gonna write “God save Japan”. Will it help saving Japan from disaster? No! It will help me to win an award.
Guess what a surprise I saw next day? No way!!! The shitty designed website saying “Lets help Japan”.
That was it. Imagine you watch the Oscar and the movie of the year becomes the 20 seconds anti-tobacco campaign that not even cool?
That is very disappointing. Guys are you judging design or trying to be politcorrect?
Whatever…

Recognition
So what actually that gave me afterall?
1) 5000 visitors during one month after submission – not bad, but only 3 people contacted me which end up to 0 contracts or projects.
2) I’ve been posted on about 50 different websites, which is good for my SEO
3) Recognition. I just realized it! That’s what was the best out of it. Now when my client says “can you make this blue and this red and move this down”.
I simply give them for example this link:
Fresh And Best CSS Web Designs Of 2011
and say do you think you know design better than me?
And that is the only reason every designer needs to do it for himself.
Oh yeah and  also to brag and boast of yourself!

So I wanted to start collecting cases like this long time ago, now I’ll be doing it right here. I’ll tag the cases “fail” which represents the meaning completely and comprehensively. The point is web design and clients with their own taste. So I had it many times “oh no this one is bad I don’t like that” or “could you change this to red and this to blue” – any designer was. And I will show each case like that from now on.

The exact project I want to share with you today was for the canadian architecture studio. So I thought finally that’s it. People love minimalism (as you can’t be in architecture today if you don’t), so I’ll be able to create something pretty. I did. No reply… :)

My design is above on the left, current website is above on the right…

That’s right mobile devices. iPhones, iPads, Androids and tons of upcoming tablets…
So why not use the same Flash? Well if Flash crashes your desktop browser for sure, it will kill your mobile one with some infinite loop they forgot to fix.
As a result Steve Jobs told us no Flash anymore and the army of followers said yeah we don’t need it, however we need video and it works on the iPhone from youtube somehow.

Even though Steve loves the idea of breaking complex tasks to small ones, he can’t develop an app for each website on the interweb, sorry Internet, that want to host videos without youtube badges… So I’m sure they have been spending tons of time to solve the problem and then someone said hey in 2022 there will be HTML5 that supports video without Flash, so lets build a TimeMachine , and he was fired for not knowing that TimeMachine is a part of Mac OS X. Perfect lets use it! And they did. However even though Apple is in 2022 now the rest of the world isn’t and that leads us to the details of the HTML5 video integration and the way it is now.

So how the hell it works on the iPhone and Android?
Easy they have built an H.264 video codec as a piece of silicon right inside the phone 2 inches down the camera. Efficiency and battery life is unbelievable, so no more program codecs here.

How does it work on the other browsers?
It doesn’t! Yes exactly! All of them are screaming we are now supporting HTML5!
Hell no! Hide your kids! Lets face the real truth and it’s like that:
Firefox, Opera, Chrome, IE, Safari
Those are the browsers today.
Lets see each of them:

Firefox we support HTML5 video, but it should be in ogg format. What is ogg? Who the hell needs to know and who will convert each video to ogg? How to do it? I have 5 different video converters none of them knows about ogg.
FAIL! (at least they have reasons they don’t have money to buy the license as they are the non-profit organization…)

Opera – same stuff ogg.
FAIL!

IE. Well before IE9 there were no such browser as IE, it wasn’t a browser it was a tool to pay all the UI developers +50% because making this damn thing behave as the others is like training a wolf instead of a dog. However I should admit that they claim to support H.264 video because they have money to buy the license. So for now it’s FAIL coz about 30% of all the people still use older IE versions.

Chrome. Google have everything and they support HTML5 video properly, basically because they own youtube and I’m sure they were involved in their Chrome HTML5 support process. So SUCCESS!

Safari well if Apple support it on your phone it’s a no brainer that they support it on something bigger. So SUCCESS here!

Now lets see the fact which is browser usage statistics:

February 2011 – according to w3schools.com

H.264 video support : 28.2%
H.264 unsupported: 71.4%

According to this data I can say HTML5 will be supported in 2022 for sure, but we’ll be dead before that.

Now I’ll show you how to make it work everywhere with the same thing as Flash, but not Flash.

The whole idea of HTML5 video was to make your (developer’s) life easier.
So long time ago they said if you want to place an image in your page do it like this:

<img src="picture.jpg" alt="" />

And it could be jpg, gif or png image. Some time ago IE6 still didn’t know what is png and how the hell should he display it. (in some cases IE7 still doesn’t display transparency properly)

<img src="picture.jpg” alt="" />

Same happening now. HTML5 says if you want to place a video on the web just do it like that:

<video width="320" height="240" controls="controls" poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
</video>

And that’s it. But now IE doesn’t know what to do with this, Firefox says “we don’t know how to display mp4”.
So Firefox and Opera suggests us to do it this way:

<video width="320" height="240" controls="controls" poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
</video>

Honestly? Go to hell guys! How can I explain my client that he needs to provide me a video in mp4 and ogg at the same time if I myself don’t know how to do it?

So what I came up with is the same BS we had before. Flash. Not actually, but QuickTime. As Apple sits in the future they also take care of us in the past and if you want you can download this window to the future for free. It’s called QuickTime and it’s a video player that could be embedded to your page with some code. And yes of course it plays mp4! It sits on the background same as Flash and you never know it’s installed, it’s just one of your browser’s plugin. According to this guys almost 60% users have it installed.

OK so when I want to integrate a movie to a page I write this code now:

<video width=”640” height="480" poster="poter.jpg" controls autobuffer>
     <source src="video.mp4" type="video/mp4;  codecs='avc1.42E01E, mp4a.40.2'"/>
     <object width="640" height="480" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
                codebase="http://www.apple.com/qtactivex/qtplugin.cab">
          <param name="src" value="video.mp4">
          <param name="controller" value="true">
          <param name="scale" value="aspect">
          <param name="loop" value="false">
          <embed src="video.mp4" width="640" height="480" controller="true"
                pluginspage="http://www.apple.com/quicktime/download/" scale="aspect" loop="true"/>
     </object>
</video>

Yes you right the trick is in the embedded object which runs the quicktime plugin for all the ones who don’t support

BUT Firefox claims they do support so it will simply not work with Firefox.
Here comes JavaScript that helps us to identify we are in Mozilla based browser(Firefox or Opera).
I’m using jQuery to identify the browser, so don’t forget to include it to the head of your html file.

function show_video(src, poster, w, h, autoplay){
  if(!jQuery.browser.mozilla){
    document.write('<video width="'+w+'" height="'+h+'" poster="'+poster+'" bgcolor="#000000" src="'+src+'" ');
    if(autoplay){ document.write('autoplay="autoplay"'); }
    document.write('><source src="'+src+'" type="video/mp4;  codecs=\'avc1.42E01E, mp4a.40.2\'"/>
    <object width="'+w+'" height="'+h+'" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
      codebase="http://www.apple.com/qtactivex/qtplugin.cab">
      <param name="src" value="'+src+'">
      <param name="bgcolor" value="#000000">
      <param name="autoplay" value="'+autoplay+'">
      <param name="controller" value="true">
      <param name="scale" value="aspect">
      <param name="loop" value="false">
      <embed src="'+src+'" width="'+w+'" height="'+h+'" autoplay="'+autoplay+'" controller="true"
            pluginspage="http://www.apple.com/quicktime/download/" scale="aspect" loop="true"/>
    </object>
    </video>');
  }else{
    document.write('<object width="'+w+'" height="'+h+'" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
      codebase="http://www.apple.com/qtactivex/qtplugin.cab">
      <param name="src" value="'+src+'">
      <param name="autoplay" value="'+autoplay+'">
      <param name="controller" value="false">
      <param name="scale" value="aspect">
      <param name="bgcolor" value="#000000">
      <param name="loop" value="false">
      <embed src="'+src+'" width="'+w+'" height="'+h+'" autoplay="'+autoplay+'" controller="true"
          pluginspage="http://www.apple.com/quicktime/download/" scale="aspect" bgcolor="#000000" loop="false">
      </embed>
      </object>');
  }
}

Looks messy but does nothing else as writes <video> tag or <object> depending on the browser.

Now to integrate video just put this code on your page(of course you need to include the function above and jQuery):

<script type="text/javascript">
  show_video(‘video.mp4’, ‘poster.jpg’, 640, 480);
</script>

It will use HTML5 in Chrome and Safari and will embed QuickTime in the others…
Not cool, but it’s not my fault, cmon guys make some standards and everybody would be happy!