Solved

CRITIC: Elastislide gallery, php and devices failure

Posted on 2015-02-21
4
82 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
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 34

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

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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)

840 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