3

I have a grid with image links on my page. When clicking one of them a modal should pop up with the image but in big format.

Now I'm trying to achieve this without the use of javascript/jquery but just with data-attributes.

At the moment I have this code:

<!-- Generating the image link with PHP (laravel) --> <a data-toggle="modal" href="#myModal"> {{ HTML::image("img/$photo->Link", "$photo->Title", array("class"=>"thumbnail col-md-3")) }} </a> <!--The modal --> <section class="row"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title text-center">HEADER</h4> </div> <div class="modal-body"> <p> BODY </p> </div> <div class="modal-footer"> <p>My Footer</p> </div> </div> </div> </div> </section>

Is is possible to achieve this just with data-attributes without using javascript?

I'm using Twitter Bootstrap Modal and Lightbox for Bootstrap 3 Plugin

EDIT:

<div class="imgLink col-md-3"> <a data-toggle="lightbox"> <img src="../img/5.jpg" class="thumbnail"> </a> </div>

Of course I've added the script of the lightbox plugin and when clicking this I'm getting no remote access how come?

Improve this question

1 Answer 1

Reset to default
2

I think you should use the lightbox plugin OR a modal.

lightbox plugin

The plugin provide the modal stucture so you don't have to add the modal html structure to your source

  1. include the javascript file from https://github.com/ashleydw/lightbox to your document: <script src="//rawgithub.com/ashleydw/lightbox/master/js/ekko-lightbox.js"></script>
  2. add a link to your image with data-toggle="lightbox":

-

<a href="http://distilleryimage6.ak.instagram.com/ba70b8e8030011e3a31b22000a1fbb63_7.jpg" data-toggle="lightbox"> <img src="http://distilleryimage6.ak.instagram.com/ba70b8e8030011e3a31b22000a1fbb63_7.jpg" class="img-responsive"> </a>

Except from the plugin no further javascript needed.

update

can I add a title to this lightbox(like a header in a modal?)

The plugin seems to have the option to set a title / footer. But the current version doesn't have the right structure to set them. I rewrite the plugin to better fit Bootstrap 3, see: https://github.com/bassjobsen/lightbox. Now you can set the title with data-title like: 

<div class="container"> <div class="row"> <a id="mylink" data-title="My LightBox" href="http://distilleryimage6.ak.instagram.com/ba70b8e8030011e3a31b22000a1fbb63_7.jpg" data-toggle="lightbox" data-gallery="multiimages" class="col-sm-4"> <img src="http://distilleryimage6.ak.instagram.com/ba70b8e8030011e3a31b22000a1fbb63_7.jpg" class="img-responsive"> </a> </div> </div>

Demo: http://bootply.com/85855

Bootstrap's Modal:

The modal has an option to provide a remote URL. This should be a valid url which provide the modal structure, see: Bootstrap 3 with remote Modal. So it is not possible to load the image direct in your modal via a data attribute. Other answers like https://stackoverflow.com/a/18463703/1596547 demonstrate how to do that. With these answers in combination with https://stackoverflow.com/a/10863680/1596547 you could write something like:

$('#myModal').on('show.bs.modal', function (e) { $('<img class="img-responsive" src="'+ e.relatedTarget.dataset.remoteImage+ '">').load(function() { $(this).appendTo($('#myModal .modal-body')); }); });

If you also add a modal structure with id #myModal to your source it will be possible to load your images in a modal with:

<a data-toggle="modal" data-remote-image="http://distilleryimage6.ak.instagram.com/ba70b8e8030011e3a31b22000a1fbb63_7.jpg" data-target="#myModal" class="btn btn-primary btn-lg">show image</a>

demo: http://bootply.com/85814

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Trying to use the lightbox plugin but when doing what you said I'm getting: No remote target given in my lightbox I'll update my question with a snippet to the code
There is no remote target, you will have to add the url of the image to the href attribute. Like: <a href="http://distilleryimage6.ak.instagram.com/ba70b8e8030011e3a31b22000a1fbb63_7.jpg" data-toggle="lightbox"> <img src="http://distilleryimage6.ak.instagram.com/ba70b8e8030011e3a31b22000a1fbb63_7.jpg" class="img-responsive"> </a>
ooh okay cool! working, side question: can I add a title to this lightbox(like a header in a modal?)
i don't know, i will look at it. I also don't see a close button (default setting). Did you also try the Bootstrap's Modal solution? It's easy to add a title and close to the modal (it is there already). Or could you tell me what's the difference between a modal and a lightbox in general?
see the update of my answer about how to add a tittle
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.