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>
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 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.
I have put a banner at the top of my website and I have tried to add a hyperlink to the whole div as follows:
<div id="banner" onclick="location.href='http://www.heavenlygardens.org.uk/';" style="cursor: pointer;">
It doesn't work but you can see it here: http://www.heavenlygardens.org.uk/maps/6/index3_new.html
Any ideas?
To achieve expected result,use below option
1.Stack banner front using z-index:9999
<div id="banner" onclick="location.href='http://www.heavenlygardens.org.uk/';" style="cursor: pointer;z-index:9999">
This works for me:
<div onclick="location.href='http://www.google.com/';" style="cursor:pointer;">
<img src="//path-to-image.jpg" alt="description of image" />
</div>
However, unless you have a good reason for doing this in JavaScript, plain HTML would be a better option.
<a href="http://www.google.com">
<img src="//path-to-image" alt="description of image"/>
</a>
I'm having trouble getting my image link to work when someone presses the picture button, and I'm not sure why. It works on my phone and my computer, but it doesn't work on other people's computer for some reason. Please let me know what I need to do to get this fixed.
Thank you.
<div class="logo2">
<a href="mailto:careers#remaxfutura.com?Subject=Career%20information%20Request;" target="_top">
<img src="http://www.remaxfutura.com/admin/web/files/1469815489_Request_an_Appointment.png" style="display:inline-block;" /> </a></div>
</div>
The code should be like this, you don't need to set target while adding link to mailto, the code should be like this
<div class="logo2">
<a href="mailto:careers#remaxfutura.com?Subject=Career%20information%20Request;>
<img src="http://www.remaxfutura.com/admin/web/files/1469815489_Request_an_Appointment.png" style="display:inline-block;" />
</a>
</div>
The markup of your code is worng. May be it's the problem.
<div class="logo2">
<a href="mailto:careers#remaxfutura.com?Subject=Career%20information%20Request;" target="_blank">
<img src="http://www.remaxfutura.com/admin/web/files/1469815489_Request_an_Appointment.png" style="display:inline-block;" />
</a>
</div>
I have an instance of CKEditor running to edit small parts of a website. The original HTML is:
<div class="slide slideleft">
<a href="#" class="slidelefta">
<img src="img/left.png" alt="previous" />
</a>
</div>
<div class="slide slidemid noauto" style="height: auto; text-align: center;">
<a href="#" class="sliderighta">
<img src="img/main_item.png" alt="item" />
</a>
</div>
<div class="slide slideright">
<a href="#" class="sliderighta">
<img src="img/right.png" alt="next" />
</a>
</div>
now, when I load it into CKEdit (inside a <textarea>, all correctly encoded with PHP's htmlspecialchars() method), it replaces all my carefully crafted DIVs and styles with the following:
<p><img alt="previous" src="img/left.png" /></p>
<p><img alt="burg.ring1" src="img/main_item.png" /></p>
<p><img alt="next" src="img/right.png" /></p>
which of course totally ruins the page's layout. Can CKEditor somehow be set to not do that?
Thank you!
Since CKEditor 4.1 the Advanced Content Filter feature is enabled. You need to configure it in order to have your HTML passing the validation. See my previous answer here: CKEditor strips inline attributes.