Solved

CRITIC: Elastislide gallery, php and devices failure

Posted on 2015-02-21
4
74 Views
Last Modified: 2015-03-27
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
Comment
Question by:Marco Gasi
  • 2
  • 2
4 Comments
 
LVL 34

Expert Comment

by:gr8gonzo
Comment Utility
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
 
LVL 34

Expert Comment

by:gr8gonzo
Comment Utility
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
 
LVL 30

Accepted Solution

by:
Marco Gasi earned 0 total points
Comment Utility
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
 
LVL 30

Author Closing Comment

by:Marco Gasi
Comment Utility
No other solution found
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now