lighbox codeigniter

1

I've instantiated everything right in the lighbox files, but for some reason it opens a new open showing the img, rather than showing the lightbox box.

<html>
<head>
    <meta charset="utf-8">
    <title>Galeria de imagens</title>
    <!--Le CSS
    ==========================================================-->        
    <link href="<?php echo base_url(); ?>includes/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/javascript">                
   <link href="<?php echo base_url(); ?>includes/lightbox/dist/css/lightbox.css" rel="stylesheet" type="text/javascript" />

    <!--Le JavaScript
    ==========================================================-->        
   <script src="<?php echo base_url(); ?>includes/lightbox/dist/js/lightbox.min.js"></script>        
    <script src="<?php echo base_url(); ?>includes/bootstrap/js/bootstrap.js"></script>       
</head>     
<body>
    <div class="container-fluid">
        <?= $menu ?>        
        <div class="row">
            <div class="col-xs-12 text-right">
                <a href="/painel/galeria_add/<?= $this->uri->segment(3) ?>"><button class="btn btn-success">Inserir Fotos</button></a><br /><br />
                <a href="/painel/index"><button class="btn btn-info">Voltar</button></a>
            </div>
        </div>
        <hr>
        <?
        $x=1;        
        ?>        
        <div class="row">    
            <?
            foreach($fotos as $foto){
            ?>

            <div class="col-xs-3">
                <div class="panel panel-<?= $foto['thumb_path'] == $fotoDestaque[0]['image_path'] ? 'primary' : 'default' ?>">
                    <div class="panel-heading"> <strong>Foto 0<?= $x ?> <?= $foto['thumb_path'] == $fotoDestaque[0]['image_path'] ? 'DESTAQUE' : '' ?></strong>  </div>
                    <div class="panel-body">
                        <a href="<?= base_url() ?><?= $foto['thumb_path'] ?>" src="<?= base_url() ?><?= $foto['thumb_path'] ?>" rel="lightbox" data-lightbox="example-set">
                           <div class="bg-center-center" style="background-image:url(<?= base_url() ?><?= $foto['thumb_path'] ?>);  width:100%; height:250px; background-repeat: no-repeat;"></div>
                        </a>
                    </div>                                        
                    <div class="panel-footer">
                        <a class='btn btn-danger' href="/images/delete/<?= $this->uri->segment(3) ?>/<?= $foto['id'] ?>" onclick="return confirm('Deseja realmente excluir essa foto?')">Excluir</a>
                        <a class='btn btn-info' href="/painel/setDestaque/<?= $this->uri->segment(3) ?>/<?= $foto['id'] ?>" onclick="return confirm('Deseja colocar essa foto de Destaque?')">Destaque</a>
                    </div>
                </div>
            </div>
            <?$x++;}?>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>

    
asked by anonymous 25.09.2015 / 21:09

2 answers

0

Hello, I think your problem is the fact that you're calling Jquery after calling Lightbox. Put the jquery script before it will work, as below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="<?php echo base_url(); ?>includes/lightbox/dist/js/lightbox.min.js"></script>        
<script src="<?php echo base_url(); ?>includes/bootstrap/js/bootstrap.js"></script>

And also remember to put the address of the same image or a larger version of it in the link.

    
24.03.2016 / 12:37
0

This problem occurs for several reasons, often because the css is not calling properly or because the javascript is not catching. Home Also check if you are calling the .lightbox () function. Home Look on the console and make sure you have a javascript error, so it will be easier for you to check the problem. Home Try to download the files again and check if the links you are pulling are working. Home If by chance it does not work, change the place lightbox script, and leave it after jquery.

Place the jquery at the top before any script.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
24.03.2016 / 13:32