I'm trying to use Lightbox to display images:
<div class="t-body tb-padding">
<p class="c-black m-b-20">Images</p>
<div ng-repeat="images in selectedItemToView.images">
<div class="lightbox row">
<a href="/user/2" class="col-sm-2 col-xs-6">
<img src="/user/2" alt="" />
</a>
</div>
</div>
<div class="lightbox row">
<a href="/user/2" class="col-sm-2 col-xs-6">
<img src="/user/2" alt="" />
</a>
</div>
</div>
I have two DIVs, one with ngRepeat, and one without it. I'm displaying the same image. The images are displayed correctly, but when I click them, the images displayed with ngRepeat just downloads. The image outside works correctly, displaying the image in the Lightbox fashion (doesn't download).
I looked at the stylings applied and they both appear to have same CSS styles applied.
When I removed ng-repeat from the DIV, it works fine. So somehow using ngRepeat is causing Lightbox not to work.
Request headers:
With ng-repeat:
Without :
Any idea?
Thank you.
Related
All that it displays when I click on it is black background.
Here is my code:
<div class="cbp-item art illustration">
<a class="cbp-caption cbp-lightbox" data-title="Abstract Art Museum" href="https://www.youtube.com/embed/watch?v=LnwPD69Fbh4"> <div class="cbp-caption-defaultWrap">
<img src="assets/images/portfolio/masonry/art.jpg" class="portfolio-thumbnail" alt="" >
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title">3D Abstract Museum</div>
<div class="cbp-l-caption-desc">Video</div>
</div>
</div>
</div>
</a>
</div>
I tried to change URL and use embed code. I also tried to research more on it but it kept on showing lightbox for images with code that had modal involved in it. I have seen this code work before without the use of modal but I feel like something else is missing.
I am trying to upload an image using the img tag. But even linking the image correctly it is not rendering on the screen
Here is the code.
<div class="row">
<div class="col-6">
<h2>MUSEUM OF CANDY</h2>
</div>
<div class="col-6">
<img class=" img-fluid" src="imgs/hand2.png" alt="handimage">
</div>
</div>
</section>
Your source location might not be accurately defined. Please check through it once. If your alt information is visible. Then your problem is in source location.
there is a space in the class at the beginning of "; maybe that's the problem :)
I have two images with two different size. I am using bootstrap in my project. But I cant place the images together which looks like both have same dimension. I have gone through similar questions and tried a lot. Please help me to sort this out.
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="http://placehold.it/2048x1536" target="_blank">
<img src="http://placehold.it/2048x1536" alt="Nature">
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="http://placehold.it/1280x720" target="_blank">
<img src="http://placehold.it/1280x720" alt="Nature">
</a>
</div>
</div>
my css is
.thumbnail img {
height:250px;
width:100%;
}
You can do it by putting the picture as background-image for the 'div' tag and setting value of 'background-position' as 'stretch'.
Said that, if the images are of different resolution and you fit them into the same-size container it might look pixelated at times.
So basically I need to set icons / labels over the thumbnail picture, how to do it with CSS and HTML? If possible I need it to be responsive. Thanks in advance.
EDIT: Sorry for not posting code, here is what I have tried using Bootstrap 3 and Font Awesome:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/test/test04.png" alt="thumb01">
<div class="col-xs-3 col-md-6">
<div class="delivery alert alert-success">
<i class="fa fa-truck" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
</div>
Delivery class:
.delivery{
position: absolute;
font-size: large;}
Ok. Firstly, if you are using some framework, look for a solution that uses it. Secondly, if you do not use a structure, you can use #media in CSS to make your elements responsives, and for the layout, what you are looking for is a thumbnail or picture card, search for it in internet if you encounter difficulties. You can work using the image and the icons inside a div, then just work with the elements using CSS (display and the float, for example). Have fun :)
I just started using Bootstrap and it's awesome so far. However I have one question, I created a content container and put a picture in it and I'm only going to have one in the row and I want it to go in the center of the page. I have tried a lot of things but to no avail, they don't work. Any help is appreciated! I'm also using Bootstrap version 3.3.6
This is my code for the container
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="random.jpg" alt="...">
<div class="caption">
<h3><center>I want the whole container in the center of the page.</center></h3>
</div>
</div>
</div>
</div>
</div>
Bootstrap has built in classes for you to use instead of the default tag. Try this for your image:
<img class="center-block" src="yourimage.png" />