here's the code of kartinkin.php file:


  $node = node_load(707);
  //$index = $_GET['index'];


<script type="text/javascript">

    $('.small-images a').click(function(e) {
      $.get("http://myadress.org/kartinki.php", {"index": index});


<?php $index = $_GET['index']; dpm($index); ?>

<div class="imba-slider">
  <a class="left-arrow" href="javascript: void(0);">#</a>
  <a class="right-arrow" href="javascript: void(0);">#</a>

  <div id="big-image-slider">
    <?php if ($index == 0): ?>
      <?php print theme_imagecache('imba', $node->field_pics[0]['filepath']); ?>
    <?php else: ?>
      <?php print theme_imagecache('imba', $node->field_pics[$index]['filepath']); ?>
    <?php endif; ?>

  <div class="small-images">
    <?php for ($i = 0; $i <= count($node->field_pics); $i++) { ?>
      <a href="?index=<?php print $i; ?>"><?php print theme_imagecache('230x130', $node->field_pics[$i]['filepath']); ?></a>
    <?php } ?>

I have included that file with include_once() inside a node.

PROBLEM. When i click on small-image it reloads the page and after reload my big image changes. With a code above i've tried to do it without a page reload, i even write e.preventDefault(); But still after clicking on a preview image it reloads the page. How can i make big image changing without reload?

  • I don't see index being defined anywhere but you're using it in: {"index": index}
    – Cravecode
    Commented May 8, 2013 at 14:11
  • I am trying to pass that "index" to a php variable $index = $_GET['index'] Commented May 8, 2013 at 14:22

1 Answer 1


You've got several issues here:

  1. PHP runs on the server, JavaScript runs on the client's browser so they don't know about eachothers variables.
  2. You're not doing anything with your $.get(..) results, you need to do something with the results of the ajax get request in a success or complete callback.
  3. You're calling a URL to a full page, i'm assuming you want just the image.

If your image names follow the naming convention I see where the thumbnails use /230x130/ in the path and the larger image uses /imba/ instead, then use the code below instead of your current click event:

slideShowIndex = 0;

$('#big-image-slider img.imagecache-imba').load(function(){

$('.small-images a').click(function(sender){
  var lnk = $(this);
  slideShowIndex = $('.small-images a').index(lnk);
  var imgUrl = lnk.find('img').attr('src').replace('/230x130/','/imba/');
  $('#big-image-slider img.imagecache-imba').attr('src', imgUrl);
  return false;

function showSlideLoader() {
  //$('#big-image-slider').html('<img class="loader" src="/sites/all/themes/antisunna/img/ajax-loader.gif" />') 
  var loader = $('#big-image-slider .loader');
  if(!loader.length) {
    console.log('creating loader');
    loader = $('<img class="loader" src="/sites/all/themes/antisunna/img/ajax-loader.gif" />')
  $('#big-image-slider .imagecache-imba').hide();

function hideSlideLoader() {
  $('#big-image-slider .loader').hide();
  $('#big-image-slider .imagecache-imba').show();  


  if(slideShowIndex > 0) {

  if(slideShowIndex < ($('.small-images a').length - 1)) {

function moveSlideIndex(index) {
  $('.small-images a:eq(' + slideShowIndex + ')').click();
  • nice man, it works! Can you help me with a left and right arrows now? i would really appreciate it also :)) PS why you have used preventDefault() with return false, isn't preventDefault() enough to remove href click event? Commented May 8, 2013 at 15:06
  • Should the arrows only cycle through the thumbnail images below the larger image? If so, what do you want to do with the previous arrow if you're on the first image?
    – Cravecode
    Commented May 8, 2013 at 15:13
  • yes, only cycle through the thumb images, when we are on the first image - it does nothing, same with the last one. Commented May 8, 2013 at 15:14
  • I update the script to work with the arrows.
    – Cravecode
    Commented May 8, 2013 at 16:06
  • Thanks, mate! I'm also trying to implement loader image now: $('#big-image-slider').html('<img class="loader" src="/sites/all/themes/antisunna/img/ajax-loader.gif" />') should i put it right before the image appears itself? Commented May 8, 2013 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.