## js [javascript]

// Photo cycle
var cycle = function () {

	$('div.imageset').each(function() {

		var next_link = $('a.next', this.parentNode);
		var prev_link = $('a.prev', this.parentNode);
		$(this).cycle({
			fx:     'fade',
			speed:  'slow',
			timeout: 0,
			next:   next_link,
			prev:   prev_link,
			before: onBefore,
			after:  onAfter
		});
	});

	function onBefore() {
		$('span.nImg').html(this.alt);
	}
	function onAfter() {
		$('span.nImg').html(this.alt);
	}

}

## html [html]

<table cellspacing="4" cellpadding="4">
	<tr>
		<?php $cols = 0; ?>
		<?php foreach($query as $row)
		{

			if ($cols != 0 && $cols % 3 == 0)
				echo '</tr><tr>';

			echo '<td valign="top">'; ?>

				<div>$<?php echo $row->rate; ?> <a href="show/<?php echo $row->hotel_id; ?>"><?php echo $row->name; ?></a></div>
				<div class="imageset">
				<?php
					$images = $this->hotels_model->getHotelImages($row->hotel_id);
					$n = 0;
					foreach($images as $image)
					{ ?>
						<img src="<?php echo base_url() . $image->image; ?>" alt="<?php echo $n+1; ?>" />
					<?php
					$n++;
					}
				?>
				</div>


				<div class="imageopts">
				<img src="<?php echo base_url(); ?>images/star<?php echo $row->rating; ?>.gif" alt="<?php echo $row->rating; ?> Star">

				<span class="nav">
				<?php if ($n > 1) {
					echo '<a class="prev" href="#"><</a> <span class="nImg"></span> of ' . $n . ' <a class="next" href="#">></a>';
				} ?>
				</span>

				<?php echo form_open('hotels/search_results', array('id' => 'addFav', 'name' => 'addFav', 'class' => 'addFav')); ?>
				<?php echo form_hidden('fav_hotel_id', $row->hotel_id); ?>
				<?php echo form_submit('addFav', 'Fav') ?>
				<?php echo form_close() ?>
				</div>

			<?php echo '</td>';
			$cols++;

		}
		?>
	</tr>
</table>