lighbox codeigniter

Asked

Viewed 55 times

1

I set all right the files of lighbox, but for some reason it opens a new open showing the img, instead of showing the lightbox.

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

codeigniter

  • press F12 and check the console if it is returning any error message

2 answers

0

Hello, I think your problem is the fact that you are 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>     
<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>

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

0

This problem occurs for several reasons, often because css is not calling correctly or because javascript is not picking up.
Also check if you are calling the . lightbox function().
Look in the console and check if you have javascript error, so it will be easier for you to check the problem.
Try downloading the files again and check if the links you are pulling are working.
If by chance it doesn’t work out, change the lightbox script from place, and leave after jquery.

Put jquery at the top before any script.

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

Browser other questions tagged codeigniter

You are not signed in. Login or sign up in order to post.