0

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?

  • I don't see index being defined anywhere but you're using it in: {"index": index} – Cravecode May 8 '13 at 14:11
  • I am trying to pass that "index" to a php variable $index = $_GET['index'] – Alexander Kim May 8 '13 at 14:22
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();
}
  • 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? – Alexander Kim May 8 '13 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 May 8 '13 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. – Alexander Kim May 8 '13 at 15:14
  • I update the script to work with the arrows. – Cravecode May 8 '13 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? – Alexander Kim May 8 '13 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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