jQuery gallery with imageFUpload

Question

here's the code of kartinkin.php file:

<?php

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

?>

<script type="text/javascript">

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

</script>

<?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><!--/big-image-slider-->

  <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 } ?>
  </div><!--/small-images-->
</div><!--/imba-slider-->

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?

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(){
  hideSlideLoader();
});


$('.small-images a').click(function(sender){
  sender.preventDefault();
  showSlideLoader();
  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').append(loader);
  }
  $('#big-image-slider .imagecache-imba').hide();
  loader.show();
}

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

}

$('.left-arrow').click(function(){
  if(slideShowIndex > 0) {
    moveSlideIndex(slideShowIndex--);
  }  
});


$('.right-arrow').click(function(){
  if(slideShowIndex < ($('.small-images a').length - 1)) {
    moveSlideIndex(slideShowIndex++);
  }  
});


function moveSlideIndex(index) {
  $('.small-images a:eq(' + slideShowIndex + ')').click();
}