# jQuery lightbox gallery

**URL:** <https://discourse.cakephp.org/t/jquery-lightbox-gallery/6767>\
**Category:** Need Help\
**Created:** [October 16, 2019, 2:37am UTC](https://discourse.cakephp.org/t/jquery-lightbox-gallery/6767 "2019-10-16T02:37:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![arizzoye](https://avatars.discourse-cdn.com/v4/letter/a/f05b48/32.png) [@arizzoye](https://discourse.cakephp.org/u/arizzoye)\
**Post date:** [October 16, 2019, 2:37am UTC](https://discourse.cakephp.org/t/jquery-lightbox-gallery/6767/1 "2019-10-16T02:37:52Z")

</div>

i wants to implement jQuery lightbox gallery, here sample code that i was modified

```auto
<head>
echo $this->Html->css('Sutinem.lsb.css');
</head>
<body>
<?php
//var img
  $klas_img = ['class' => 'img-responsive'];
  $fulb = ['fullBase' => true];
?>
<div class="col-sm-4 col-xs-4 agile_gallery_grid">
   <div class="w3ls_gallery_grid">
    <?php
     echo $this->Html->link(
        $this->Html->image('Sutinem.g4.jpg',$klas_img,$fulb).
	$this->Html->tag('div','',array('class' => 'agileinfo_content_wrap')).
	$this->Html->tag('div','',array('class' => 'agileits_content')).
	$this->Html->tag('h3','Burger').
	$this->Html->tag('p','Ne nam facilisis adolescens faucibus.'),
     '/img/g4.jpg',array('class' => 'lsb-preview wthree_p_grid', 'data-lsb-group' => 'header', 'escape' => false));						
						?>
</div>

</div>
<!-- gallery-lightbox -->  
<?php echo $this->Html->script('Sutinem.lsb.min.js'); ?>
<script>
  $(window).load(function() {
     $.fn.lightspeedBox();
  });
 </script> 
	<!-- //gallery-lightbox -->
</body>

```

the gallery picture have shown beauty, but the animate lightbox jQuery doesn’t work,  
any ideas to make it works…🙏🙏

---

<div class="post-metadata">

**Author:** ![Zuluru](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/zuluru/32/1230_2.png) [@Zuluru](https://discourse.cakephp.org/u/Zuluru)\
**Post date:** [October 16, 2019, 1:38pm UTC](https://discourse.cakephp.org/t/jquery-lightbox-gallery/6767/2 "2019-10-16T13:38:26Z")

</div>

What does “doesn’t work” mean? Is the JavaScript file loading correctly? Do you have errors in the JS console?

---

<div class="post-metadata">

**Author:** ![arizzoye](https://avatars.discourse-cdn.com/v4/letter/a/f05b48/32.png) [@arizzoye](https://discourse.cakephp.org/u/arizzoye)\
**Post date:** [October 17, 2019, 8:58am UTC](https://discourse.cakephp.org/t/jquery-lightbox-gallery/6767/3 "2019-10-17T08:58:13Z")

</div>

in pure HTML, jQuery lightbox gallery is perfect running with animation,  
while I’ve customize in Cake,…the picture is shown, but the lightbox animation is not work.

I’m linking css gallery lighbtox inside tag head

```auto
<?php
echo $this->Html->css('Sutinem.lsb.css');
echo $this->Html->css('Sutinem.owl.carousel.css');
echo $this->Html->css('Sutinem.owl.theme.css');
echo $this->Html->css('Sutinem.style.css');
?>

```

below some code picture gallery inside tag div

```auto
<div class="col-sm-4 col-xs-4 agile_gallery_grid"> 
   <div class="w3ls_gallery_grid">
	<?php
	   echo $this->Html->link(
	    $this->Html->image('Sutinem.g4.jpg',$klas_img,$fulb).
	    $this->Html->tag('div','',array('class' => 'agileinfo_content_wrap')).
	    $this->Html->tag('div','',array('class' => 'agileits_content')).
	    $this->Html->tag('h3','Burger').
	    $this->Html->tag('p','Ne nam facilisis adolescens faucibus.'),
	  '/img/g4.jpg',array('class' => 'lsb-preview wthree_p_grid', 'data-lsb-group' => 'header', 'escape' => false));						
?>
  </div>
</div>

```

next I call javascript gallery lightbox in the end tag body

```auto
<body>
<!-- jarallax -->
<?php echo $this->Html->script('Sutinem.jarallax.js'); ?>
	<script type="text/javascript">
		/* init Jarallax */
		$('.jarallax').jarallax({
			speed: 0.5,
			imgWidth: 1366,
			imgHeight: 768
		})
	</script>
<!-- //jarallax -->
<!-- gallery-lightbox -->  
	<?php echo $this->Html->script('Sutinem.lsb.min.js'); ?>
	<script>
	$(window).load(function() {
		  $.fn.lightspeedBox();
		});
	</script> 
	<!-- //gallery-lightbox --> 
	<!-- owl carousel -->   
	<?php echo $this->Html->script('Sutinem.carousel.js'); ?>
	<script>
	$(document).ready(function() { 
		$("#owl-demo").owlCarousel({
	 
			autoPlay: 3000, //Set AutoPlay to 3 seconds
			autoPlay:true,
			items : 3,
			itemsDesktop : [991,2],
			itemsDesktopSmall : [414,4]
	 
		}); 
	}); 
	</script>
	<!-- //owl carousel -->
    <?php echo $this->Html->script('Sutinem.bootstrap.js'); ?>
</body>

```

some file javascript and css gallery lightbox that I’ve most view and learning, here

```auto
<?php
echo $this->Html->css('Sutinem.lsb.css');
echo $this->Html->css('Sutinem.owl.carousel.css');
echo $this->Html->css('Sutinem.owl.theme.css');
echo $this->Html->script('Sutinem.jarallax.js');
echo $this->Html->script('Sutinem.lsb.min.js');
echo $this->Html->script('Sutinem.carousel.js');
?>

```

inside file jarallax.js

```auto
Jarallax.prototype.initImg = function() {
        var _this = this;

        // get image src
        if(_this.image.src === null) {
            _this.image.src = _this.$item.css('background-image').replace(/^url\(['"]?/g,'').replace(/['"]?\)$/g,'');
        }
        if(!_this.image.src || _this.image.src === 'none') {
            return false;
        }
        return true;
    }

```

the result generate code

```auto
$klas_img = ['class' => 'img-responsive'];
$fulb = ['fullBase' => true];
echo $this->Html->link(
   $this->Html->image('Sutinem.g6.jpg',$klas_img,$fulb);
'/img/g2.jpg',array('class' => 'lsb-preview wthree_p_grid', 'data-lsb-group' => 'header', 'escape' => false));

```

are not synching with the jQuery files generate tag img, look for tag

```auto
source of <img>

```

tha’s some error, why animation gallery lightbox not working,  
might some master of CakePHP could give the best ideas,🙏🙏

thanx