Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 100
  • Last Modified:

CRITIC: Elastislide gallery, php and devices failure

Hi all.
I'm implementing in a CodeIgniter site the Elastislide jquery gallery.

Markup:
<ul id="carousel" class="elastislide-list">
						<?php foreach($cocinas as $c){ ?>
							<li data-target="<?php echo pics_url($c['pictures']); ?>" data-preview="<?php echo pics_url($c['midnail']) ?>" data-prodname="<?php echo ucfirst($c['prod_name']); ?>" data-desc="<?php echo $c['description']; ?>"><a class="thumbnail" href="#"><img src="<?php echo pics_url($c['thumbnail']) ?>" alt="<?php echo $c['prod_name']; ?>" /></a></li>
						<?php } ?>
					</ul>

Open in new window


This is the initialization code:
<script type="text/javascript">
	var current = 0,
	$prodname = $( '#prodname' );
	$description = $( '#description' );
	$parent = $( 'a.fancybox' ),
	$preview = $( '#preview' ),
	$carouselEl = $( '#carousel' ),
	$carouselItems = $carouselEl.children(),
	carousel = $carouselEl.elastislide( {
		current: current,
		minItems: 4,
		onClick: function ( el, pos, evt ) {

			changeImage( el, pos );
			evt.preventDefault();

		},
		onReady: function () {

			changeImage( $carouselItems.eq( current ), current );

		}
	} );
	function changeImage( el, pos ) {
		$prodname.html('<h3>'+el.data('prodname')+'</h3>');
		$description.html(el.data('desc'));
		$parent.attr( 'href', el.data( 'target' ) );
		$preview.hide().attr( 'src', el.data( 'preview' ) ).fadeIn();
		$carouselItems.removeClass( 'current-img' );
		el.addClass( 'current-img' );
		carousel.setCurrent( pos );
	}
</script>

Open in new window


Clicking on thumbnails updates the preview image , the name displayed end the description.
All this works fine in my desktop, but on an iPad, in Samsung Galaxy Tab 2, in a low cost smartphone and in a low cost tablet the description - only the description - remains the same! If someone has any idea I'll be grateful forever!

Thank you all in advance
0
Marco Gasi
Asked:
Marco Gasi
  • 2
  • 2
1 Solution
 
gr8gonzoConsultantCommented:
Have you tried using a different value for the description to see if it makes any difference? For example:

$description.html(Date());

...should show the current timestamp, which should change every second. That would confirm that the line is being reached and evaluated each time...
0
 
gr8gonzoConsultantCommented:
Also, is this:
var current = 0,

...supposed to be:
var current = 0;

with a semi-colon at the end?

I noticed a lot of other lines with the same thing - commas instead of semi-colons at the line ends...
0
 
Marco GasiFreelancerAuthor Commented:
Hi gr8gonzo, thanks for your reply.
About the comma, I believedd to have found the error me too with them, but they just declare everal variables using the word 'var' only once.
About the values, I did the test you suggested without success.
I've solved the practical problem writing a custom event handler for the click on the thumbnail, so the page now works fine, but it remains a mystery why I didn't just using the event in the initialization block.
I'll leave the question open to ee if someone has some other idea, but I begin to think this is one of the ununswered questions which will remain forever in the dark side of my mind :-)
0
 
Marco GasiFreelancerAuthor Commented:
No other solution found
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now