2011-09-03 3 views
1

저는 책 목록을 보여주는 WordPress 사이트에서 일하고 있습니다. 각 책에는 2 개의 표지가 있습니다 (미국의 경우 책 표지, 영국/세계를위한 책 표지).jQuery/Ajax를 사용하여 이미지를 클릭 + PHP로 전환하여 이미지 호출

2 개의 링크 (미국 버전 및 영국 버전)가있는 DIV가 있습니다. - 각 링크를 클릭 할 때 jQuery 및/또는 Ajax를 사용하여 책 표지를 전환하려고합니다. 나는 PHP 함수를 사용하여 이미지를 호출 할 필요가 있기 때문에 내가 갇히지있어

,의는 "get_image"여기

내 (깨진) 코드의 호출 할 수 있습니다.

는 HTML :

<a id="us-cover" href="#">US Version</a> | <a id="uk-cover"href="#">UK Version</a>` 

JAVASCRIPT + PHP :

는 는 는
jQuery(function(){ 
    $("#us-cover").live('click', function() { 
     <?php get_image('us'); ?> 
    }); 
}); 
jQuery(function(){ 
    $("#uk-cover").live('click', function() { 
     <?php get_image('uk'); ?> 
    }); 
}); 
는 는

어떻게 여기 계속해야합니까? 이 같은

+0

그래서 책 표지와 실제 컨테이너가 두 개의 링크가 별도의 해당 컨테이너 아래? –

답변

0

나는 당신의 더 높은 목표에 따라 예를 만들기 위해 자유를했다. 물론 조정이 필요하지만 기술적으로 가장 간단한 예입니다.

라이브 예 : http://jsfiddle.net/hobobne/LUDwz/

<style> 
    #book_cover {display: none;} 
</style> 
<script> 
    var us_cover = 'http://thebosh.com/archives/2010/11/25/Miley-Cyrus.jpg' ; 
    var uk_cover = 'http://www.ashleefan.com/wp-content/uploads/2010/06/MileyCyrus.jpg'; 

    var book_cover = $('#book_cover'); 

    $(document).ready(function() { 
     // This sets the default on load 
     book_cover.attr('src', us_cover); 
     book_cover.fadeIn(300); 
    }); 

    $('.triggers').click(function() { 
     // Gets the triggers id which will be us or uk 
     var this_trigger = $(this).attr('id'); 
     // Does the work 
     if (this_trigger == 'us') { 
      book_cover.attr('src', us_cover); 
     } else if (this_trigger == 'uk') { 
      book_cover.attr('src', uk_cover); 
     } 
     // Since the triggers are links, then lets return false, so the page woulnt redirect 
     return false; 
    }); 
</script> 
<img id="book_cover" /><br /> 
<br /> 
<a href="#" class="triggers" id="us">US cover</a> | <a href="#" class="triggers" id="uk">UK cover</a> 
2

시도 뭔가 :

jQuery(function(){ 
    $("#us-cover").live('click', function() { 
     $("#bookimgid").attr("src","<?php get_image('us'); ?>"); 
    }); 
}); 
jQuery(function(){ 
    $("#uk-cover").live('click', function() { 
     $("#bookimgid").attr("src","<?php get_image('uk'); ?>"); 
    }); 
});