Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CRITIC: Elastislide gallery, php and devices failure

Posted on 2015-02-21
4
Medium Priority
?
98 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

650 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