Iraklis Iraklis - 1 month ago 14
Ajax Question

'data-rel' lightbox not working with ajax content

I have this piece of code which is a partial for a one page website and i call it with ajax to fill the 'portfolio content' of the website.

<div class="container">
<div class="row">
<div class="heading-section col-md-12 text-center">
<h2>{{ $data['generals']->portfolio_title }}</h2>
<p>{{ $data['generals']->portfolio_secondary_title }}</p>
</div> <!-- /.heading-section -->
</div> <!-- /.row -->
<div class="row">
@foreach($data['portfolio'] as $port)
<div class="portfolio-item col-md-3 col-sm-6">
<div class="portfolio-thumb">
<img src="visitor/images/gallery/{{$port->background_image}}" alt="">
<div class="portfolio-overlay">
<h3>{{$port->title}}</h3>
<p>{{$port->body}}</p>
<a href="visitor/images/gallery/{{$port->background_image}}" data-rel="lightbox" class="expand">
<i class="fa fa-search"></i>
</a>
</div> <!-- /.portfolio-overlay -->
</div> <!-- /.portfolio-thumb -->
</div> <!-- /.portfolio-item -->
@endforeach
</div> <!-- /.row -->
</div> <!-- /.container -->


When i call it with ajax the
data-rel="lightbox"
is not working. If i don't call it and i just include the code in the project it is working just fine. Why AJAX won't let it work?

I call it like this:

function appendData(div, url){
$.ajax({
url: url,
success: function (data) {
$(div).append(data);
}
});
}
appendData('#portfolio');


I am using this plugin

And I call it like this :

$(function(){
$('[data-rel="lightbox"]').lightbox();
});


Thanks!

Answer

You've to initialize the plugin after adding the new DOM to the document :

function appendData(div, url){
    $.ajax({
        url: url,
        success: function (data) {
             $(div).append(data);

             $('[data-rel="lightbox"]').lightBox(); //init plugin for new elements
        }
    });
}

Hope this helps.

Comments