Question

我正在使用Fancybox jquery。当我点击此链接时，我有一个链接，我通过AJAX检索图像。我希望这些图像直接在Fancybox中打开。

这是我的HTML代码 -

 <a href="javascript:void(0); id="Delhi" class="store_pictures_click">Store Pictures</a>
    <a href="javascript:void(0); id="Mumbai" class="store_pictures_click">Store Pictures</a>
    <div id="storeModal"></div>

这是我的jquery代码 -

$(document).ready(function(){


    $('.store_pictures_click').click(function(e){
        e.preventDefault();

        var store_name  =   $(this).attr('id');

        $.post('<?php echo site_url("cart/change_store_pictures"); ?>',{store_name:store_name},
            function(data){

                $('#storeModal').html(data);
                $('.fancybox').fancybox();
            }
        );

    });

});

这是我的PHP代码 -

$store_name =   $this->input->post('store_name');
        $this->load->model('Store_Pictures_model'); 
        $data['store_pictures'] =   $this->Store_Pictures_model->get_store_pictures($store_name);

        echo '<p>';
        foreach($data['store_pictures'] as $store_picture){
            ?>

            <a class="fancybox" href="<?php echo base_url('uploads/images/full/'.$store_picture->store_picture); ?>" ></a>
        <?php
        }

        echo '</p>';

但是我无法看到带滑块的fancybox弹出窗口。请帮助我们。

提前致谢!!!

Answer 1

视图中的更改：

<a href="<?=base_url()?>cart/change_store_pictures/Delhi" id="Delhi" class="store_pictures_click">Store Pictures</a>
<a href="<?=base_url()?>cart/change_store_pictures/Mumbai" id="Mumbai" class="store_pictures_click">Store Pictures</a>
<script type="text/javascript">

$(function(){
    $(".store_pictures_click").fancybox({
        type        : 'iframe',
        autoSize : false,
        /*beforeLoad : function() {                    
            this.width = parseInt(this.href.match(/width=[0-9]+/i)[0].replace('width=',''));  
            this.height = parseInt(this.href.match(/height=[0-9]+/i)[0].replace('height=',''));
            //this.width = $('.fancybox-iframe').contents().find('.fancybox-skin').width();
            //this.height = $('.fancybox-iframe').contents().find('.fancybox-skin').height();
        },*/
        width    : "710px",
        height   : "290px",
        'scrolling'     : 'no',
        'titleShow'     : false,
        //padding         : 0,
        openEffect  : 'fade',
        closeEffect : 'fade'
    });
});

</script>

你的控制器：

function change_store_pictures(){
    $store_name =   $this->uri->segment( 3 );
    $this->load->model('Store_Pictures_model'); 
    $data['store_pictures'] =   $this->Store_Pictures_model->get_store_pictures($store_name);
    $this->load->view("pic_popup", $data);
}

你的pic_popup.php：

<?php
    //print_r( $store_picture ); 
?>
<a class="fancybox" href="<?php echo base_url('uploads/images/full/'.$store_picture->store_picture); ?>" >
    <img src="<?=base_url('uploads/images/full/'.$store_picture->store_picture)?>">
</a>

希望它有所帮助。：d

使用AJAX的fancybox不起作用

1 个答案: