Stephen's Thoughts

Over the last few months I have been helping my dad with a new website for his self catering holiday home in Galway. It gave me an opportunity to create a wordpress theme using thematic theme framework as well as look at some features of JQuery.

The Issue

One issue that he had with his old site was the very long page used to display all of the rooms in the house. It listed each room, one above the other with a picture and a description.

I wanted a way to display each room description and picture in a slideshow so only one room is displayed at any one time. I saw an example of a JQuery slideshow here that change the image from a list on a button click. I wasn’t interested in animating the image sliding across but it showed me how to use JQuery to change the order of the elements on the page.

$('#slides li:first').before($('#slides li:last'));

This takes the first li child of an element with an id of ‘slides’ then places it before the last li element. The example uses CSS to hide all of the other elements of the list so that only one element is shown at a time. When the JQuery code above moves the first element to the end, the second element is show. This is the CSS that makes this all work:

#slides {
  overflow:hidden;
  position:relative;
  width:250px;
  height:250px;
.....

As the height and width of the of the surrounding element is fixed and overflow is hidden, you will never see the other elements in the list.

My Solution

So with this example in mind, I set about defining a div for a room that I would display. This contains 3 other divs with the following class: roomName, roomImg, roomDesc. I also added a clear div to the bottom of each room definition to make sure that the content did not overflow.

				Kitchen

				
			


Rangemaster cooker with gas hob & electric oven
 American-style fridge
 Belfast sink
 Granite worktops
 Dishwasher
 Kitchen table comfortably seats 12 diners
 Radio/CD player
 Dual aspect
 Double doors leading onto upper terrace

The CSS is similar to the example that I was using. Again, the important part is to make sure the surrounding div has overflow set to hidden so that only the content of one room is shown at a time.

  .clear {clear:both}
  .roomList{
  	width:640px;
	height:355px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
  }
  .room {
	min-height:350px;
  	width:570px;
  }
  .roomDesc {
	float: left;
	max-width:240px;
  }
  .roomImg img{
	max-width:300px;
	max-height:350px;
	vertical-align:text-top;
	float: right;
	position:relative;
	padding:5;
  }

I changed the JQuery from the example to rotate the order of the div elements that I created when a previous and next button is clicked. As I didn’t want to animate a slide effect like the example, I just faded out the element before changing it and then faded the new element back in.

jQuery('#prev').click(function() {
			jQuery('.rooms').fadeOut('slow', function() {
				//move the last item and put it as first item
				jQuery('.room:first').before(jQuery('.room:last'));
				jQuery('.rooms').fadeIn('slow');
				setButtonText();

			});

        //cancel the link behavior
        return false;
    });  

    //if user clicked on next button
    jQuery('#next').click(function() {
      		jQuery('.rooms').fadeOut('slow', function() {
				//move the last item and put it as first item
				jQuery('.room:last').after(jQuery('.room:first'));
				jQuery('.rooms').fadeIn('slow');
				setButtonText();

		});
        //cancel the link behavior
        return false;  

    });

The setButtonText function is used to set the title attribute of the previous and next button to the next and previous rooms in the list. the

function setButtonText()
{
	jQuery('#prev').attr('title',jQuery('.room:last .roomName').html());
	jQuery('#next').attr('title',jQuery('.room:nth-child(2) .roomName').html());
}

The Demo

You can see this example in action on the accommodation page of Riverside Paradise.

Thanks to Kevin Liew for putting me on the right track with this JQuery slideshow example.