Chrome mobile and Fancybox -> Images not loading correctly - responsive-design

I have a website that aggregates some FB events for my city and I've tried making it responsive
I'm having an issue opening it in my phone(s3 mini) that the image for the event won't load correctly.. BUT it loads when I try closing that fancybox and opening the a second time, this doesn't occur at all in desktop browsers.. I have no idea on how to fix this, can anyone help?
Address: fubuia.com.br
Here's pics:
Opening an event for the first time
After closing fancybox and opening it again

With some code it would be better...
I think the image is loaded after your fancybox, try to add width and height properties in your images.
<img src="/path/to/your/image.jpg" alt="" height="100" width="100">

Related

Next JS Image component doesn't load svg beforehand / disable "Lazy Loading"

The problem is only with svg images. Works well with other formats
Hello! I am using an Image component in nextjs. I ran into a problem while trying to add an svg image to a modal window. When I open the modal the image is missing and it takes about a second to load. This happens every time the modal window is reopened.
I think this is due to "Lazy Loading". This option is very inappropriate in this case. I would like to load the image as soon as the user enters the site, and not during the opening of the modal window
I have tried several ways.
assign Image properties to the component
`
<Image
src={Email}
alt={"Picture"}
width={20}
height={20}
loading={"eager"}
priority
/>
`
Problem still exists. Loading an image takes a second of time after each modal window is opened
Load an image in the main component, and pass it through props to the modal window.
Problem still exists
My svg image is very small. I have also tried other images

image popsup and then goes directly open without lightbox

when clicking on image set it pops out and goes directly open without the use of lightbox. When I go page back then the lightbox start working normally.
when I change
<img class="" src="images/import/import1/1.jpg" />

ngf-select causing opening window while swiping on phone

[![enter image description here][1]][1]I see lots of Questions regarding ng-click event triggered while swiping images on phone. and there are lots of solutions on this. But I have placeholders when I click on it, it should open a window to select image using ngf-select(danielfarid's) which will open a window when swipe event compeleted, I tried detecting swipe trigger and tried not adding images based on flag set after detecting swipe trigger. But still the window is getting opened as soon as user ended swipe.
I am using bxslider to show gallery where we have pager and the image selected, so when I try to scroll pager in mobile using swipe it causes opening window to select file. as the last three placehodlers have functions to upload image using ngf-select.
this is the code for placeholder i am using to select images
<a ngf-select="uploadImage($files)" >
<i class="fa fa-plus-circle mainimg"></i>
<img ng-src="img/plus.png" class="tb_gal"/>
</a>
So the case of horizontal swipe is handled in v 12.2.5 and this issue is resolved in ng-file-upload/danielfarid v 12.2.5.

IE7 display wrong ALT-tag when image is wrapped in a link?

I have a question about IE7 and how it ”interprets” title and alt HTML tags.
I’ve this constalation on a site:
<a title="My Name" alt=" My Name " class="profile_image" href="/members/my-ane">
<img rc="/uploads/sfguarduserprofile/229/11066_60x60_3f9ee652879b2e3209698830c9ff1583.jpeg" alt="11066_60x60_3f9ee652879b2e3209698830c9ff1583">
</a>
Now, when hover with my cursor in IE 8+, Firefox, Chrome, Safari, you-name-it it shows “My Name” in the alt-box.
But when heading over to IE7, it shows: 11066_60x60_3f9ee652879b2e3209698830c9ff1583 which would be the image alt tag.
I have the possibility to change the alt text on the image but if there is any solution other than that, I would very much appreciate it so I don’t use too much time on a relatively small problem in a single browser.
And are there any explanation why IE7 can’t figure this out oppose to its bigger brothers, IE8, 9+ ??
Sincere
- Mestika
Technically, the alt attribute should serve as alternative content in case the image doesn't load. In your case, there is no contextual need for an alt tag, as a user that cannot view the profile image does not need to see the image to understand the rest of the content.
The image should have an empty alt attribute per the WHATWG.

Using lightbox2 to display text instead of images

I am trying to use lightbox2 to display a block of text after clicking a heading element:
something like
<h3>name</h3>
I have used lightbox for images with captions but this time I would like the caption to come up without an associated image after clicking a name on a webpage.
Thanks for any replies.
I don't think that lightbox2 is made for such a thing, why don't you try http://fancybox.net/ this one works 100%.

Resources