I am adding an event this image and it just disappears when adding said even i wonder if i use an icon and css it would show up
here is the component
#inherits SelectUserListComponentBase
<h3>Selected User List</h3>
<div class="container-fluid">
#if(!SelectedUsers.Any())
{
<div>No Users</div>
}
else
{
<div>
<ul class="ppt">
#foreach(var u in SelectedUsers.Keys)
{
<li>#u</li>
<image id="#u" #onclick="async ()=>{ await this.DeleteuserEvent.InvokeAsync(u);}" src="/images/icons/icons-remove.png"></image>
}
</ul>
</div>
}
</div>
even adding as an icon and directly linking to said image it not showing up
cs
<i style="background-image:url('/images/icons/icons-remove.png')" #onclick="async ()=>{ await this.DeleteuserEvent.InvokeAsync(u);}" ></i>```
Related
I have a DIV which holds background images, and I change them by bootstrap carousel item change by passing data-bg attribute like below:
HTML
<div class="bg-holder" data-bg="bg-1">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS
const bgHolder= document.querySelector(".bg-holder");
$('#carousel').on('slide.bs.carousel', function (e) {
bgHolder.dataset.bg = e.relatedTarget.dataset.bg;
})
CSS
.bg-holder[data-bg="bg-1"] {
background-image: url(image1.jpg)
}
.bg-holder[data-bg="bg-2"] {
background-image: url(image2.jpg)
}
I set data-bg="bg-1" by default and then on every carousel change i pass the new data-bg value. it works great in all modern browsers except IE11 which do not refresh the images from css, and it keeps displaying the one i loaded by default. When I open developers tools and uncheck/check the declaration it displays the proper image. Any ideas ?
I test in IE and reproduce the issue. As a workaround, you could set the background-image as inline style of bg-holder and change it on every carousel change according to bg value. The sample code is like below:
HTML:
<div class="bg-holder" style="background-image: url(image1.jpg)">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS:
$('#carousel').on('slide.bs.carousel', function (e) {
if (e.relatedTarget.dataset.bg == "bg-2") {
$(".bg-holder").css("background-image", "url(image2.jpg)");
}
else {
$(".bg-holder").css("background-image", "url(image1.jpg)");
}
})
You could also check this online demo in IE 11.
What I'm trying to do is to zoom an image on click, the idea is:
you click on an image
dialog of width=85vw opens up with the image you just clicked on inside of it (so the image is displayed almost fullscreen now)
I cannot think of a better way of "zooming" an image on click, but to open it in a modal dialog (if there's an easier way, please let me know).
Code:
<v-dialog v-model="dialog" max-width="85vw" >
<img :src="img1" alt="" width="100%" #click.stop="dialog=false">
</v-dialog>
<img :src="img1" width="500px" #click.stop="dialog = true">
<img :src="img2" width="500px" #click.stop="dialog = true">
<img :src="img3" width="500px" #click.stop="dialog = true">
export default {
data() {
img1: "../../src/assets/pexels-photo-373912.jpg",
img2: "../../src/assets/pexels-photo-373912.jpg",
img3: "../../src/assets/pexels-photo-373912.jpg"
}
}
The problem is, it's not opening any clicked image in a dialog, just the one you hard coded in there, in this example it will always open img1 no matter what image you click.
I don't know how to pass the :src into the dialog dynamically - the :src of the image you clicked.
P.S. v-dialog is a component from Vuetify.js library
Question:
Is there an obviously better way of doing it?
If not really, how do I make this method to work and display the image I clicked in the modal dialog?
You need a variable to hold which image is selected. When you click on an image, it should set the variable to the url for that image. When you click on the dialog image, it should unset the variable.
The dialog should show when the variable is set and otherwise be hidden.
For simplicity, I'm not using an actual dialog, just a div. It looks like you would use it for the dialog's v-model rather than using the v-if I use.
new Vue({
el: '#app',
data: {
selectedImage: null,
images: [
'http://via.placeholder.com/400x300?text=image%201',
'http://via.placeholder.com/600x400?text=image%202',
'http://via.placeholder.com/500x500?text=image%203'
]
},
methods: {
zoom(url) {
console.log("Zoom", url);
this.selectedImage = url;
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<div v-if="selectedImage" max-width="85vw">
<img :src="selectedImage" alt="" width="100%" #click.stop="selectedImage = null">
<hr>
</div>
<div v-for="url in images">
<img :src="url" width="100px" #click="zoom(url)">
</div>
</div>
to click distributed images across the page define a property and change it with click event
in template
<v-dialog v-model="dialog" max-width="60%" #keydown.esc="cancel">
<v-card>
<v-img :src="pic" alt="" contain/>
</v-card>
</v-dialog>
<v-img
src="require(#/assets/clinic/1.jpeg)"
alt=""
contain
#click="openPic(require('#/assets/clinic/1.jpeg'))"//this part is important you have to require image
/>
in script
data() {
return {
pic: "",
dialog: false
}
},
methods: {
openPic(image) {
this.dialog = true
this.pic = image
},
cancel() {
this.dialog = false
}
}
I am trying to instantiate child component on click of a button in parent component. This same child component need to get instantiated on click of 2 more buttons in a different component. This child component is nothing but a modal component and basically modal component needs to get instantiated from 2 different components(one in header, another in parent). I have a modal template in which modal data comes dynamically. I am instantiating modal component using dynamic component loader. Now modal component is getting instantiated when buttons are clicked. But they are instantiated more times than expected.
Below is header html where click of one button is happening:
<-- code here-->
<!-- FAQModal -->
<modal-component #modalID></modal-component> // modal-component is selector of modal.html
<-- code here-->
<li [style.display]="!showFAQ?'none':'inherit'"><a (click)="getFAQ()" data-remote="false"
data-toggle="modal" data-target="#modalTarget"><i class="fa fa-question"></i>FAQ</a></li>
header.component.ts -
getFAQ() {
this._modalService.setModalId('FAQ');
if (this.component !== undefined) {
this.component.then((componentRef: ComponentRef) => {
componentRef.dispose();
return componentRef;
});
}
this.component = this.dcl.loadIntoLocation(ModalComponent, this._elementRef, 'modalID');
}
parent.html
<!-- Modal -->
<div #modalID></div>
<div class="col-sm-12 btnpolicymargin">
<a (click)="getTerms()" data-remote="false" data-toggle="modal" data-target="#modalTarget" class="tosModal">Terms and Conditions</a>
<a (click)="getPolicy()" data-remote="false" data-toggle="modal" data-target="#modalTarget" class="pcModal">Parent Consent Policy</a>
</div>
parentcomponent.ts - below piece of code in parent component
getTerms() {
this._modalService.setModalId('T&C');
this.instantiateModalComponent();
}
getPolicy() {
this._modalService.setModalId('ParentPolicy');
this.instantiateModalComponent();
}
instantiateModalComponent() {
if (this.component !== undefined) {
this.component.then((componentRef: ComponentRef) => {
componentRef.dispose();
return componentRef;
});
}
this.component = this.dcl.loadIntoLocation(ModalComponent, this._elementRef, 'modalID');
}
Modal template
<div id="modalTarget" 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">{{modalTitle}}</h4>
</div>
<div class="modal-body">
<div [innerHTML]="modalData"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
ModalComponent
constructor(private _modalService:ModalService) {
this._modalService.updateModalId.subscribe(modalId => {
this.modalID = modalId;
console.log('id:' + this.modalID);
switch (this.modalID) {
case 'FAQ':
this.goFAQ();
break;
case 'T&C':
this.getTerms();
break;
case 'ParentPolicy':
this.getPolicy();
break;
default:
break;
}
});
}
goFAQ() {
this._modalService.goFAQ().subscribe(data => {
this.modalData = data;
this.modalTitle = 'Frequently Asked Questions';
});
}
Modal service is used to set modalId which indicates which button is pressed. Also when setting an event emitter is used to pass data to other components.
Can somebody help me to understand what could be the issue? why modal component getting instantiated more number of times and calling backend more than needed.?is it because modal is getting used by 2 different components?
I used bootstrap 3 and blueimp-gallery in a web html5. My problem is a carousel-gallery dont show images and receive a error in a console "Uncaught TypeError: Cannot read property 'style' of undefined" when i use a blueimp-gallery-carousel in a modal div, but if i enter in a developer tools for chrome, this error disappears, and the images show in carousel-gallery.
The code.
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Vinilos</h2>
<div id="links">
1
2
3
</div>
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<p>Vinilos para rotulacion, decorativos, efecto espejo, fibra de carbono, refractivos, hologramas y farolas</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar Producto</button>
</div>
</div>
</div>
</div>
</div>
</div>
and my javascript
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
</script>
and the link web problem
http://www.colombiawaterprint.com/web/index3.html
How i Solve this error?
I believe your problem is that your blueimp gallery is initially hidden as it is in a Bootstrap Modal. As such, when you first initialize the gallery it can't find the gallery. I think all you need to do is wait for the Bootstrap modal to be shown and then initialize the gallery.
Bootstrap triggers an event that you can listen for for this very purpose - http://getbootstrap.com/javascript/#modals-events - You probably want the shown.bs.modal event.
You would use it something like this. (assuming jQuery is loaded)
$('#portfolioModal1').on('shown.bs.modal', function (e) {
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
})
Bear in mind this is untested code and may not 'just work'. But hopefully you get the idea. You also may want to do a test to see if you've already initialized the gallery, as it stands this would re-initialize it every time the shown.bs.modal event was fired.
I am using magnific popup on a new website that i am building but i am running into a problem getting it to work when multiple galleries on the same page.
I'm using wordpress, Slick Slider to display a slider full of thumbnails and when one of the thumbnails is clicked it should open the larger version of the image in the Magnific Popup.
My HTML looks like this:
<div class="media-carousel slick-initialized slick-slider" id="carousel-links">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 1152px; transform: translate3d(0px, 0px, 0px);">
<div class="slick-slide slick-active" data-slick-index="0" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image1-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image1.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="1" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image2-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image2.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="2" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image3-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image3.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="3" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image4-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image4.jpg" alt="" class="standard-image"></a>
</div>
</div>
</div>
</div>
I have a site.js file that contains all of the javascript for my site in it. I'm calling magnific popup using the following function. I've added some extra stuff in it to add effects.
jQuery('#carousel-links').each(function() {
jQuery(this).magnificPopup({
delegate: 'a',
type: 'image',
tClose: 'Close (Esc)',
tLoading: '',
preload: [1,4],
gallery:{
enabled:true,
tPrev: 'previous',
tNext: 'next',
tCounter: '%curr% of %total%'
},
image: {
verticalFit: true,
titleSrc: function(item) {
return item.el.attr('title') + ' · <a class="image-source-link" href="'+item.src+'" target="_blank"><i class="fa fa-file-image-o"></i> open original</a>';
}
},
closeBtnInside: false,
closeOnContentClick: false,
mainClass: 'mfp-zoom-in',
removalDelay: 300, //delay removal by X to allow out-animation
callbacks: {
lazyLoad: function (item) {
console.log(item); // Magnific Popup data object that should be loaded
},
beforeOpen: function() {
jQuery('#carousel-links a').each(function(){
jQuery(this).attr('title', $(this).find('img').attr('alt'));
});
},
open: function() {
//overwrite default prev + next function. Add timeout for css3 crossfade animation
jQuery.magnificPopup.instance.next = function() {
var self = this;
self.wrap.removeClass('mfp-image-loaded');
setTimeout(function() { jQuery.magnificPopup.proto.next.call(self); }, 120);
}
jQuery.magnificPopup.instance.prev = function() {
var self = this;
self.wrap.removeClass('mfp-image-loaded');
setTimeout(function() { jQuery.magnificPopup.proto.prev.call(self); }, 120);
}
},
imageLoadComplete: function() {
var self = this;
setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16);
}
}
});
});
I have the same exact HTML code building different galleries outputting on the same page and for some reason the first carousel with lightbox works great. But for whatever reason, the second gallery does not work. The carousel works fine, but Magnific Popup does not fire. When i click on one of the thumbnails, it opens the larger image in the browser window.
I tested my js function by adding a "console.log("clicked");" after the .each. I see the console that the thumbnail is being clicked and that part is working.
Any idea how i can get the multiple sliders to work on my page?
I've tried the example from the documentation for the multiple galleries by removing everything from the function and making it as barebone as possible. I get the same result, the first lightwindow works but the second one does not.
I'm not seeing any js errors on the console either.
UPDATE #1
This isn't an ideal solution, but i did find a way to make this work. I had to use unique IDs on each slider in order to get the lightbox to work if multiple sliders were on the same page using the same ID value. In this case, I was using #carousel-links for all of the sliders. I guess you can't share the same ID for sliders across the board and get this lightbox to work?
I also moved the javascript code to be right after the carousel in the module template page. I removed it for now from my site.js file.
I'm not looking for a way to optimize the code so i can put it in my site.js. I'll try to grab that ID value by using the class on each carousel. I'll report back if i can get that to work.
UPDATE #2 - OMG
Could the problem i was having when the lightbox only worked with the first instance of the lightbox be because i was an ID instead of a CLASS as my selector for the lightbox? I changed to the CLASS and now they are all working.
What fixed my problem is I changed the selector from the ID to a class on the same element. This allowed for multiple galleries on the same page to work together with no problem.