Solved

CRITIC: Elastislide gallery, php and devices failure

Posted on 2015-02-21
4
91 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 35

Expert Comment

by:gr8gonzo
ID: 40624513
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 35

Expert Comment

by:gr8gonzo
ID: 40624515
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 31

Accepted Solution

by:
Marco Gasi earned 0 total points
ID: 40624551
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 31

Author Closing Comment

by:Marco Gasi
ID: 40691417
No other solution found
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

690 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