3 replies to this topic

[ab2qik]

Hello All!

code below is for a carousel of a few images. Images are inline on page body. It has next / previous navigation. It also has a search box to enable search of an image by its name. Its an ajax request to a php file that uses an array to hold the images.

Navigation by next / prev works. Using ajax search displays the specific image searched for on a first search. The searched image gets loaded into the carousel and hides the viewable images in the carousel viewable area. This is desired. But a second search does not seem to generate an ajax request when checking in firebug console panel. The searched image is replaced by the viewable images instead.

How can it be edited to make each ajax search show up and update the viewale area.

Thankyou for any help.

JS:

$(document).ready(function() {
var spacing = 140;

//console.log(imagename);


$('#imageSlide')
.css(
{ 'width': spacing * 3,
'height': '166px',
'overflow': 'hidden' }
)
.find('.covers a')
.css(
{ 'float': 'none',
'position': 'absolute',
'left': 1000 }
);

var setUpCovers = function() {
var $covers = $('#imageSlide .covers a');
var prev = $('.controler a.prev');
prev.unbind('click');
var next = $('.controler a.next');
next.unbind('click');

// Left image; scroll right (to view images on left).
$covers.eq(0)
.css('left', 0);
prev
.click(function(event) {
$covers.eq(2)
.css('left', 1000);
$covers.eq($covers.length - 1)
.prependTo('#imageSlide .covers');
setUpCovers();
});

// Right image; scroll left (to view images on right).
$covers.eq(2)
.css('left', spacing * 2);
next
.click(function(event) {
$covers.eq(0)
.css('left', 1000);
$covers.eq(0)
.appendTo('#imageSlide .covers');
setUpCovers();
});

// Center image.
$covers.eq(1)
.css('left', spacing);
};
setUpCovers();


var imageLoader = function() {
$('form').submit(function() {
$('#imageSlide')
.load('scripts/imageHolder.php', $(this).serialize());
});

$('form-container').submit(function(event) {
//$(event.target).remove();
});
}
imageLoader();
});



PHP:

<?php
$items = array(
'image1' => '8252313238',
'image2' => '8247338432',
'image3' => '8251341199',
'image4' => '8248530301',
'image5' => '8253003584',
'image6' => '8241570649'
);

$imageId = $_REQUEST['imageId'];
$item = $items[$imageId];
?>

<div align="center">
<?php if ($imageId != "") { ?>
<img id="itemPhoto" src="images/<?php echo $item; ?>.jpg" />
<?php } ?>
</div>

[Xaotique]

Could you please format and use code tags?

Edited by Xaotique, 30 December 2012 - 10:35 PM.

[ab2qik]

Hello Xaotique, thanks for quick reply. Hope the code displays as you wanted it to.

Heres a link to it:
http://www.codesolv..../carousel-ajax/

$(document).ready(function() {
var spacing = 140;

//console.log(imagename);


$('#imageSlide')
	 .css(
	 { 'width': spacing * 3,
		 'height': '166px',
		 'overflow': 'hidden' }
	 )
	 .find('.covers a')
	 .css(
		 { 'float': 'none',
		 'position': 'absolute',
		 'left': 1000 }
	 );

var setUpCovers = function() {
	 var $covers = $('#imageSlide .covers a');
	 var prev = $('.controler a.prev');
		 prev.unbind('click');
	 var next = $('.controler a.next');
		 next.unbind('click');
	
	 // Left image; scroll right (to view images on left).
	 $covers.eq(0)
	 .css('left', 0);
	 prev
	 .click(function(event) {
		 $covers.eq(2)
		 .css('left', 1000);
		 $covers.eq($covers.length - 1)
		 .prependTo('#imageSlide .covers');
		 setUpCovers();
	 });

	 // Right image; scroll left (to view images on right).
	 $covers.eq(2)
	 .css('left', spacing * 2);
	 next
	 .click(function(event) {
		 $covers.eq(0)
		 .css('left', 1000);
		 $covers.eq(0)
			 .appendTo('#imageSlide .covers');
		 setUpCovers();
	 });

	 // Center image.
	 $covers.eq(1)
	 .css('left', spacing);
};
setUpCovers();


var imageLoader = function() {
	 $('form').submit(function() {
	 $('#imageSlide')
		 .load('scripts/imageHolder.php', $(this).serialize());	
	 });

	 $('form-container').submit(function(event) {
	 //$(event.target).remove();
	 });
}
imageLoader();
});

[ab2qik]

Ooh heres the php part:

<?php
	 $items = array(
					 'image1' => '8252313238',
					 'image2' => '8247338432',
					 'image3' => '8251341199',
					 'image4' => '8248530301',
					 'image5' => '8253003584',
					 'image6' => '8241570649'
				 );

	 $imageId = $_REQUEST['imageId'];
	 $item = $items[$imageId];
?>

<div align="center">
<?php if ($imageId != "") { ?>
<img id="itemPhoto" src="images/<?php echo $item; ?>.jpg" />
<?php } ?>
</div>