Retrieve Image source by class or id with php and javascript/JQuery

Question

What i'm trying to do is i have an image display on the page and another image lays on top with many frames selection implemented by JQuery from the following tutorial:

http://www.queness.com/post/3036/create-a-custom-jquery-image-gallery-with-jcarousel

With JCarousel, one of the images from many selected will be assigned with "active" class to the

and the each of the images are within list, for example

<li><a href="#"><img src="#" /></a></li>

What i want to do is to get the image src location with "active" state (class) whenever user click or select and pass into php. Does anyone mind to offer some suggestion or tips on how can i do that?

Thank you for your time reading my Question.

Answer 1

The following jQuery should select what you want in JavaScript:

var activeImageSource = $('li.active').find('img').attr('src');

As for passing it to PHP, it depends on how you are submitting information. You could submit the src via an HTTP <form> POST (where the action is the PHP file that is coded to parse the request) or via an AJAX request. You can access the posted data in the PHP $_POST array.

JavaScript

var activeImageSource = $('li.active').find('img').attr('src');

$.ajax({
  type: 'POST',
  url: 'some.php',
  data: 'activeImage=' + activeImageSource,
}).done(function(msg) {
  console.log('Success');
});

PHP

<?php
  echo 'activeImage source is ' . htmlspecialchars($_POST['activeImage']);
?>