I am following one of the bootstrap's template and I am dealing with the next problem:
Template
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="img/portfolio/fullsize/1.jpg">
<img class="img-fluid" src="img/portfolio/thumbnails/1.jpg" alt="">
<div class="portfolio-box-caption">
<div class="project-category text-white-50">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</a>
</div>
My problem is the following:
`href` in the `<a>` seems to shows in a modal the image in a bigger size, but I am trying to use it as a variable.
I have tried to use ng-ref="myvariable" but it does not happen (either an error)
How could I do it?
Maybe you should do the next:
...
<a class="portfolio-box" href={{ your-variable}}>
...
Value of "your-variable" should be in the component of this template.
Related
I have the following snippet of code in html:
<div class="row">
<div class="col-sm-6">
<div class="product-images">
<div class="product-main-img">
<img src="img/product-thumb-13.jpg" alt="">
</div>
<div class="product-gallery">
<img src="img/product-thumb-14.jpg" alt="">
<img src="img/product-thumb-75.jpg" alt="">
<img src="img/product-thumb-76.jpg" alt="">
</div>
</div>
</div>
</div>
I would like to allow users of the website to click on one of the three thumbnails (14,75 and 76) in the "product-gallery" class and allow it to be visualized as main image (like product 13), hence in bigger size, while the other 3 stay smaller.
The process should be applicable to anyone of the three images on click (typical visualization of products in an ecommerce website, where a particular image is made bigger on click and the others stay small).
I have looked online for applicable methods but cannot find the one I am looking for.
Thanks for the help, have a good day!
This can be achieved by adding an onClick event handler for all the secondary images to change the src attribute of the central image. I have used specific ids to select the images from the DOM. Then we flip the image sources.
<div class="row">
<div class="col-sm-6">
<div class="product-images">
<div class="product-main-img">
<img id="primary-img" src="img/product-thumb-13.jpg" alt="">
</div>
<div class="product-gallery">
<img id="secondary-img" src="img/product-thumb-14.jpg" alt="">
<img id="secondary-img" src="img/product-thumb-75.jpg" alt="">
<img id="secondary-img" src="img/product-thumb-76.jpg" alt="">
</div>
</div>
</div>
</div>
window.onload = function(e){
const secondaryImages = document.querySelectorAll("#secondary-img")
const primaryImage = document.getElementById("primary-img")
secondaryImages.forEach((image) => {
image.addEventListener("click", function() {
const backupSrc = primaryImage.src
primaryImage.src = image.src
image.src = backupSrc
})
})
}
EDIT: fixed code bugs (string literals)
I have an image to display thanks to a lighbox.
If I get the image online with a link http there is no problem but if I want to recover an image of the database I encounter a problem. I would like to display the image in the tag as below.
IF you have tracks I thank you in advance. Beautiful day
<a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
<img src="https://unsplash.it/600.jpg?image=256" class="img-fluid rounded">
</a>
TO
<div class="row" *ngFor="let drawing of drawings;">
<a href="????" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
<img style="max-width:400px;" *ngIf="drawing.image" [src]="drawing.image">
</a>
</div>
Since you use angular, take advantage of it :
<div class="image-container" (click)="navigate()">
<img src="...">
</div>
navigate() {
const a = document.createElement('a');
a.href = '...';
a.setAttribute('data-toggle', 'lightbox');
a.setAttribute('data-gallery', 'gallery');
a.click();
a.remove();
}
This will work as if you were actually clicking on a link, but you don't actually use alink in your template.
Other than that, I don't see an issue with appending an image to a link :
<a href="google.com" target="_blank">
<img src="https://via.placeholder.com/500x100?text=ImagePlaceholder">
</a>
Hi I'm having an issue with Lightbox where it will duplicate my images from my gallery. for example if I put in a row of 3 images, it will display 3 images on the screen, but when clicked on, it will display 6 images.
Here is some code, to give you a better idea of what i'm doing and what my problem is.
<div class = "gallery"> <!------- Image Gallery -------->
<h2> Gallery </h2>
<div class="row"> <!-- Row 1 - contains 3 images -->
<div class="col-lg-4"> <!-- Each Column represents an image -->
<a href = "images/person-2.jpg" data-title = "My First Caption" data-lightbox = "person1">
<img src="images/person-2.jpg" width="200px" class="img-responsive"/>
</a>
</div>
<div class="col-lg-4">
<a href="images/person-2.jpg" data-title = "My Second Caption" data-lightbox = "person1">
<img src="images/person-2.jpg" width = "200px" class="img-responsive"/>
</a>
</div>
<div class="col-lg-4">
<a href="images/person-3.jpg" data-title = "My Third Caption" data-lightbox = "person1">
<img src="images/person-3.jpg" width="200px" class="img-responsive"/>
</a>
</div>
</div><!--Row 1 ends -->
<div class = "row"> <!-- row 2 - contains 3 images -->
<div class = "col-lg-4">
<a href = "images/person-1.jpg" data-title = "caption 1" data-lightbox = "person1">
<img src = "images/person-1.jpg" width = "200px" class = "img-responsive"/>
</a>
</div>
<div class = "col-lg-4">
<a href = "images/person-2.jpg" data-title = "caption 2" data-lightbox = "person1">
<img src = "images/person-2.jpg" width = "200px" class = "img-responsive"/>
</a>
</div>
<div class = "col-lg-4">
<a href = "images/person-2.jpg" data-title = "caption 3" data-lightbox = "person1">
<img src = "images/person-2.jpg" width = "200px" class = "img-responsive"/>
</a>
</div>
</div><!--Row 2 ends -->
</div>
It shows the 6 images instead of 3 because you are using data-lightbox = "person1" for all 6 images. From the Docs : If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images.
Simple solution is to use a different data-lightbox value for each group of images you want in a set.
I had a similar trouble with lightbox duplicating images, in my case i had a div with inside it an image, an icon and some text. I set the anchor for lightbox on the external div and it duplicated the image three times (since there were three elements inside it). I found a solution retyping the anchor for each single element with different data-lightbox, and everything worked fine. Hope this can help you sorting out your situation.
From this that showed my image three times:
<div class="col-md-3 wow fadeInUp" data-wow-delay="0.1s">
<a href="img/campi/campob.jpg" data-lightbox="campob" title="Campo B">
<div class="about-col">
<div class="img">
<img src="img/campi/campob.jpg" alt="" class="img-fluid">
<div class="icon"><i class="ion-ios-search"></i></div>
</div>
<h2 class="title"><a>Campo B</a></h2><br>
</div>
</a>
</div>
To this, that works fine:
<div class="col-md-3 wow fadeInUp">
<div class="about-col">
<div class="img">
<a href="img/campi/campoa.jpg" data-lightbox="campoa2" title="Campo A">
<img src="img/campi/campoa.jpg" alt="" class="img-fluid">
</a>
<a href="img/campi/campoa.jpg" data-lightbox="campoa" title="Campo A">
<div class="icon"><i class="ion-ios-search"></i></div>
</a>
</div>
<h2 class="title">
<a href="img/campi/campoa.jpg" data-lightbox="campoa3" title="Campo A">
Campo A
</a>
</h2>
<br>
</div>
</div>
I'm creating a hybrid app for iOS and Android and I'm using framework7 to create it. The thing is I have a media list view that onclick should redirect to a page.html, and it doesn't. I've triple-checked every-name to see if it was a capital letter thing but every name was written correctly. This is the media list view code:
<li>
<a href="Page.html" class="item-link item-content">
<div class="item-media"><img src="abc.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Hey!</div>
</div>
<div class="item-subtitle">Hi</div>
</div>
</a>
</li>
Does someone know what might be the problem?
Framework7 uses ajax pages by default, so your target page should be formatted for this, or you can add the class name external to the href tag to open directly.
<li>
<a href="Page.html" class="item-link item-content external">
<div class="item-media"><img src="abc.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Hey!</div>
</div>
<div class="item-subtitle">Hi</div>
</div>
</a>
</li>
Check the documentation note: http://framework7.io/docs/pages-ajax.html
I am designing a blog by modifying an existing Jekyll theme where the header containing the title is one colour and the rest of the page another. I would like to insert a number of round icons (social networks etc.) in a line that are indented into the header. I feel it is easier to explain this with a picture:
where the blue dots are round icons or buttons. How can I achieve this in HTML/CSS?
EDIT:
AwokeKnowing gave me some tools to do what I want but they move when I resize my window.
This is what my page looks like on my 13" laptop screen:
but when I resize it on my 23" monitor I get:
I want it to look like my first image. This is my code:
HTML
<div>
<div class="s d"> <a href="mailto:?Subject=Mindfield-{{ page.title }}&Body={{ page.url }}">
<img src="/assets/images/mail-icon.svg" alt="Email" width=40px/>
</a></div>
<div class="s e"><a href="https://www.facebook.com/sharer/sharer.php?u={{site.domain_name}}{{page.url}}"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<img src="/assets/images/Facebook-icon.svg" alt="Facebook" width=40px/></div>
<div class="s f"><a href="http://twitter.com/share?text={{page.title}}&url={{site.domain_name}}{{ page.url }}"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<img src="/assets/images/Twitter-icon.svg" alt="Twitter" width=40px/></div>
</div>
CSS
.s{position:absolute;top:216px;border-radius:50%;background:white;width:45px;height:45px;text-align:center;color:white}
.d{left:1200px}
.e{left:1255px}
.f{left:1310px}
here's something to get you started
.t{padding:20px;background:teal}
.con{position:relative;background:beige}
.c1{padding:20px}
.sc{position:relative;float:right;width:250px;}
.s{position:absolute;top:-10px;left:10px;border-radius:50%;background:blue;width:20px;height:20px;text-align:center;color:white}
.a{left:10px}
.b{left:40px}
.c{left:70px}
.d{left:100px}
.e{left:130px}
.f{left:160px}
<div class="t">Title</div>
<div class="con">
<div class="sc">
<div class="s a">S</div>
<div class="s b">O</div>
<div class="s c">C</div>
<div class="s d">I</div>
<div class="s e">A</div>
<div class="s f">L</div>
</div>
<div class="c1">Content</div>
<div class="c1">Content</div>
<div class="c1">Content</div>
</div>