0

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>';

しかし、スライダー付きのファンシーボックスのポップアップが表示されません。助けてください。

前もって感謝します！！！

4

1 に答える 1

-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

于 2013-10-22T10:44:48.117 に答える