I am having difficulty with the bootstrap lightbox plugin. I got the code from
http://jbutz.github.io/bootstrap-lightbox/#home
I would like to have it where a user can click a link and then be shown all the images in the lightbox. Right now I have the following code:
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<% for picture in #gallery %>
<%= image_tag picture.image_url.to_s %>
<div class="lightbox-caption"><p><%= picture.caption %></p></div>
<% end %>
</div>
I am using CarrierWave for images and have a caption for each image. Right now each image is being displayed on the page (I do not want that) and images are not clickable, as well as the entire lightbox only has one caption.
The problem is that you have only defined the hidden div that is popped when you run the Lightbox code. If you look at the page source, you'll see that the whole Lightbox code section looks like this:
<div class="example">
<ul class="thumbnails">
<li class="span2">
<a data-toggle="lightbox" href="#demoLightbox" class="thumbnail">
<img src="assets/img/small.png" alt="Click to view the lightbox">
</a>
</li>
</ul>
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="assets/img/large.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
</div>
Notice how there is a ul of clickable thumbnails that have the data-toggle="lightbox" attribute and link to the div containing the fullsize picture.
Try adding the clickable thumbnail with the above attributes to your code.
Related
I am having a modal that have two divs in it. Now i am willing to open the same modal with two different links.
Here is my modal:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<%= link_to "Back","#",class: "btn btn-default",id: "Back-Link",style: "display:none"%>
<%= link_to "Next","#",class: "btn btn-default",id: "Next-Link"%>
<div id="One">
<p>Some text in the modal.</p>
</div>
<div id="Two" style="display:none">
<p>Modal Two.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Following are the links:
<%= link_to "Test","#", 'data-toggle': "modal", 'data-target': "#myModal"%>
<%= link_to "Test1","#", 'data-toggle': "modal", 'data-target': "#myModal"%>
When I click on "Test" Link the modal should open with div id "One". And when i click on "Test1" the modal should open with div id "Two".
can anyone help me? Thank you in advance
Here is a working fiddle.
I made use of the data attributes to store id of div to show inside the modal. Then on click of it, I changed its style from display:none to block.
<div class="modal-body">
<div id="one" class="hide_first">
<p>Some text in the modal.</p>
</div>
<div id="two" class="hide_first">
<p>Modal Two.</p>
</div>
</div>
Open #One
Open #Two
<!-- Storing the id of divs in data-modal-show -->
And write some javascript like this
//classes given to our links
$(".modal-open-links").on("click", function(e){
//First set display:none for all divs
$(".hide_first").css("display", "none");
//hide_first class is on both our divs inside modal body that we want to alternatively show
content_to_show = $(this).attr("data-modal-show");
//the div id we want to show on modal open
//Show the one we clicked
$("#" + content_to_show).css("display", "block");
});
I have an images index page which displays an entire album of photos from the User's Facebook profile in a uniform square grid. To get the square grid shape, I had to use some css which crops a little bit of the image from the sides (essentially a thumbnail).
I want the users to be able to click on an image so that a modal comes up that shows the full image, which they can then crop themselves.
Most importantly, I'm wondering how to make it so the modal that pops up is like a form, where you select the part that you want cropped and then click submit, and the photo and crop parameters get saved to the database
Here is what I have so far:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<% #profile = #graph.get_object("me") %>
<%= #profile["name"] %><br>
<%= link_to 'Sign Out', sign_out_path, method: :delete %>
<br>
<% #albums = #graph.get_connections("me", "albums?fields=name,photos{name, images{source}}") %>
<% #albums.at(3)["photos"]["data"].each do |data| %>
<div id="<%= data["id"] %>" class="myImages" data-toggle="modal" data-target="#myModal">
<%= image_tag data["images"].first["source"] %>
</div>
<% end %>
<script>
$(document).ready(function() {
$(".myImages").click(function (e){
e.preventDefault();
$(".modal-body").html($(this).html());
});
});
</script>
I am using bootstrap modal on my rails project. On this page I have to iterate through my slides and for each slide I want to create a modal. I came up with this solution:
<% #slides.each do |slide| %>
<div class="row slidecard text-center">
<div class="col-xs-12 ">
<h2><%= slide.name.upcase %></h2>
<p><em><%= slide.description %></em></p>
<a href="#" data-target=<%=slide.id%> data-toggle="modal">
<%= image_tag slide.picture.url(:medium) %>
</a>
<div class="modal fade" id= <%=slide.id%>>
<div class="modal-dialog mymodal">
<div class="modal-content text-center">
<div class="modal-body">
<%= image_tag slide.picture.url(:original) %>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div
</div>
I give to the link containing the image the data-target attr and gives it the value that has the slide.id so I can give a specific id and data target that links image and modal. But the problem is that for the modal to work I need to add "#"in front of slide.id to have something that looks like data-target="#39"
I tried a couple of things such has :
data-target= "#"<%=slide.id%>
and other stuff but nothing gives me the result I want and make the modal work !
licence
try to this
I've got the following HTML in an MVC 5 / Bootstrap app. As you can see, I am attempting to display a photo in the modal dialog. This works fine. But, if the photo is wider than the dialog, it extends beyond the bounds of the dialog. Is there a way I can have the dialog expand, to a certain point, then display scroll bars, based on the size of the contents (image)?
<div class="modal fade" id="viewPhotoDialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Ask the Experts</h4>
</div>
<div class="modal-body">
<img src="#Url.Action("GetPhoto", new { askTheExpertId = #Model.AskTheExpertId })" alt="" title=""/>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can add .img-responsive class to the img (gives max-width:100% and auto height).
About modal width, there are 2 extra option classes modal-lg and modal-sm that you can add at .modal-dialog
http://getbootstrap.com/javascript/#modals
I have a Rails view with two icons. Each icon should open a different modal (using a partial).
The issue is that both icons are opening the same modal (the first one).
Here is the code to display the modals:
<a data-toggle="modal" href="#workorder-<%= workorder.id %>">
<i class="icon-list"></i><%= workorder.wologs.count %>
<%= render :partial => "wologs/history", locals: {workorder: workorder} %>
</a>
<a data-toggle="modal" href="#workorder-<%= workorder.id %>">
<i class="icon-ok-sign"></i><%= workorder.tasks.count %></a>
<%= render :partial => "tasks/taskslist", locals: {workorder: workorder} %>
</a>
Thanks for the help!
As MrYoshiji already mentioned the reason is two links point to same id, so same modal launched.
I would like to add that it's also incorrect to put the modal body inside link, if the partial is modal body.
According to Bootstrap example:
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
The link and modal are two totally different divs.
So the fix is:
Launch partial in different div and assign different ids to them.