Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Uncategorized / How to use jQuery to make image slides tutorial

Oct 30, 2010 By Jared Heinrichs Leave a Comment

How to use jQuery to make image slides tutorial

This tutorial will go over how to make an image slide. When ever I start on an idea for a webpage I like to make notes. Recently I started using Microsoft OneNote for most of my planning. It’s really helped with the planning and presentation of my ideas with clients.

For this tutorial I want to have an image presented on a page. When I hover my mouse over the image I want the image to slide down. When it slides down I want it to reveal a hidden text or graphic below.

jQuery slide tutorial 01

Because I’m not a big fan of Flash except when it comes to video I thought jQuery would be a great way of delivering the result I want. Now that we know what we want the items to do lets work on the coding of the jQuery Slide tutorial.

Let’s start with the xhtml:

xhtml

jQuery slide tutorial 02

The main part of the xhtml is the div container with an “id” of “slideWrapper”. There is two images. 1 and two. These are the same images I used in the last jQuery tutorial.

jQuery slide tutorial 03

As you can see the images aren’t even close to what we are wanting in the drawing we created at the beginning of the post. We’re going to use CSS to place the pictures and then use jQuery to do the sliding function. Because of this it would make sense to look at the CSS to get things looking the way we want them to look and then program the jQuery code.

Before looking at the CSS code you should find out the sizes of the pictures you are going to use. They should both be the same size to make things look right. In my case I opened up Photoshop and viewed the image size there. For the rest of the example I will be using these measurements.

jQuery slide tutorial 04

If you have Windows 7 it’s even easier. Just browse to the location of the file. The size is just part of the interface like so:

jQuery slide tutorial 05

CSS

jQuery slide tutorial 06

Let’s go over a few thing regarding the CSS. I typically find most people have a REALLY hard time understanding floats and positioning.

  • Line 1 – Let’s create a wrapper and name it something nice. “slideWrapper”.
  • Line 2 – Put the width of pictures here: 200px;
  • Line 3 – Put the height of pictures here: 300px;
  • Line 4 – We want to position this container relative. We do this because we don’t care where on the page this item is. Anything inside of this container we want them to be positioned relative to this box/container.
  • Line 5 – Overflow: hidden means anything that may spill over the size of the container will become hidden from view. This will help ensure that all browsers will display the same output.
  • We are going to need the two pictures stacked on top of each other. The easiest way of doing it is by:
  • Line 8 – creating an entry for #slideWrapper img. (You wouldn’t want to do this to ALL images on the page)
  • Line 9 – We are going to position the images inside #slideWrapper absolutely.
  • Line 10 – The top of the picture will be at the top of the #slideWrapper
  • Line 11 – The picture will be aligned to the inside left side of the #slideWrapper

This will make the output look similar to this:

jQuery slide tutorial 07

Please notice that 2.jpg is positioned in the same spot as 1.jpg. This makes it look like there is only one picture on the screen.

Now we need to implement hover and slide jQuery functions to get the effect we were looking for.

jQuery

Let’s build this thing out a little bit at a time:

jQuery slide tutorial 07

Basically this code says when ever you hover over #slideWrapper then run a function, then when we hover off of #slideWrapper run a different function.

Now that we have the skeleton of the code laid out let’s make it a bit more readable.

jQuery slide tutorial 08

Following so far? Let’s add the animate parts of the code. Basically we are saying take the child with a class of “fontImage”, stop any animated previously applied to it and then animate with what ever we tell it. The same happens when we take the mouse off the #slideWrapper box.

jQuery slide tutorial 09

Since we know the dimensions of the pictures we know we need to slide the top picture down 300px when we hover the mouse. When we take the mouse off we know we need to slide the picture back to it’s original spot. Here’s the code for that:

jQuery slide tutorial 10

Here’s a screenshot while the sliding is occurring.

jQuery slide tutorial 11

Now since I don’t just like to give the least amount of info, what happens if you want the downward speed of the slide to be different from the speed of the slide going up? Well all you have to do is:

jQuery slide tutorial 12

The downward slide is 800miliseconds. and the slide going up is 400ms.

*UPDATE* – I got a private email asking how to change the code so that the top picture slides to the right instead of down. Here’s how I would do it in my next post called: jQuery image slides to the right.

Filed Under: Uncategorized

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design