Using this lazy-loading code, my lightbox breaks: clicking on an image shows the lightbox but without image.
I can see that the lightbox img tag has no src value by checking the inspector. I guess the lightbox checks the src before the lazy-loading has assigned the attribute and the value to the image.
How can I fix this issue?
You may be able to use the data-fullsize parameter mentioned in the documentation - if this is set on each <img> tag, they should be loaded when the gallery is opened.
An example of how this might look in the HTML (with the lazy-loading example from the link you provided):
<img data-lazy="img/cow.jpeg" data-fullsize="img/cow.jpeg">
Related
I'm trying to make a picture portfolio like the first demo example on this page http://www.no-margin-forerrors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto . However, instead of have it invoke an image when clicked it takes me to another page, I'd like it to have a pop up image instead. I had already checked possibilities in theme settings but none available.
This is the link http://tile.johnzuh.com/unsere-fliesen/ to the Page with this behaviour. You will realise that once u click on the gallery image item it sends you to another page using this
<a itemprop="url" class="eltdf-pli-link" href="http://tile.johnzuh.com/portfolio-item/home-interior-2/" target="_self"></a>
linked element to image. This is an unexpected behaviour
How it should behave
I would appreciate a behaviour similar to that on this page instead http://tile.johnzuh.com/portfolio-item/plava-identity-design-4/
Once you click on an image it should invoke a bigger image from thumbnail.
I see it uses
<a itemprop="image" title="portfolio-single-13" data-rel="prettyPhoto[single_pretty_photo]" href="http://tile.johnzuh.com/wp-content/uploads/2016/09/portfolio-single-13.jpg">
<img itemprop="image" src="http://tile.johnzuh.com/wp-content/uploads/2016/09/portfolio-single-13.jpg" alt="s" />
</a>
It uses the prettyPhoto element instead of linking to the href. How do i adopt this ? Some quick workarounds, examples will be appreciated.
Issue was solved by changing some dynamic settings in theme.
I have created thumbnails to load videos from the custom gallery, the link is using javascript like so.
<img src="#" onclick="jwplayer().load({file:'http://christiantvonline.net/streams/HTVG_2.mp4'}); jwplayer().play();" />
If you click on the first thumbnail in this page you will see the video attempts to load and then dies.
Can anyone help with this please, or better way to achieve this, the player is Jwplayer.
There are a number of issues with the structure/integrity of the code on the page you have linked to, however the answer to the specific question is as follows:
When providing an anchor value (#) as the HREF attribute in an A tag (you are not using the IMG tag as suggested, otherwise it would work!), the page will commonly reload - depending on the browser, at least the first time.
As a result, if you are intending on using JavaScript to perform an action and don't want the default link action to occur, you need to stop it as part of your JavaScript instructions:
event.preventDefault();
So the basic code would look something like:
<a href="#" onclick="event.preventDefault(); jwplayer().load({file:'http://christiantvonline.net/streams/HTVG_2.mp4'}); jwplayer().play();">
<img src="url-to-image.jpg">
</a>
Alternatively, you could add the "onclick" attribute to the image (as you've suggested it was) and remove the A tag wrapping the IMG.
Your CSS is already applying rollover effects on the image element (not the A tag) and so you may simple need to add the following to make it look like a link:
cursor:pointer;
As part of an image gallery I am using the below code to switch out the src attribute on an image element as a user clicks on various thumbnails. Every part of it has been working fine for about 7 months, since I built it, but sometime in the past few weeks this part of the code stopped working:
var nextLgSrc = $('.gallery-image._'+selected).data('lgsrc');
$('.hero-image').attr('src', nextLgSrc);
nextLgSrc is succesfully returning an absolute URL to the image that will be replacing the current one. And the src of the img element is in fact changing when the thumbnails are clicked, but the images no longer change. The first (default) image stay stuck, even though the src attribute is changing underneath it.
Can anyone tell me what might have happened and how to fix it?
Here is a link to the full gallery code to see it in context if that's helpful: http://pastebin.com/mae8YQi2
And actually, here is a link to a page that isn't working: http://penumbralux.com/project/marisol
Becuase when you click on images other than first one,
You are only updating src attribute of img.
When inspecting elements with developer tools on chrome, I noticed that srcset attribute of your main image also needs to be updated. I tried it and its working fine after updating srcset attribute of that image.
<img width="970" height="647" src="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2349-970x647.jpg" class="hero-image wp-post-image" alt="Caption Test" data-smsrc="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-100x100.jpg" data-lgsrc="Array" srcset="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-300x200.jpg 300w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-1024x683.jpg 1024w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-750x500.jpg 750w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2349-970x647.jpg 970w" sizes="(max-width: 970px) 100vw, 970px">
So in a single sentence, update src and srcset both.
you are using srcset which is used for responsive images on different width browsers. you need to update that as well
Remove srcset and everything would work as expected. And IE does not support it as of today if you wish to work across all browsers. See http://caniuse.com/#feat=srcset
Also it would be a good idea to preload images to make your page more responsive.
I want to fix this but know very little about Javascript but need a site I'm working on finishing asap:
I want to change the href path pointing to an image inside fancyBox and
Image Thumbnail Viewer II so that they point to two seperate images.
I have amended the other script as follows:
'+"store-images/large_"+$anchor.attr('href')+'
I have tried amending the following line amongst other things to no avail in fancyBox as follows:
image : '<img class="fancybox-image" src="store-images/full_{href}" alt="" />',
I'm using one link for two functions and want to change the link slightly in the javascript to work with both.
Let's say the link shows:
href="image-name.jpg"
I want one link to end up showing
="large_image-name.jpg"
and the other to show:
href="full_image-name.jpg"
Here's the link to both scripts:
http://fancybox.net/
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
Thanks!
I'm trying to create an image gallery using Shadowbox plugin(http://www.shadowbox-js.com).
So I got a problem with creating the gallery, That problem is: whenever I click on the link(actually thumbnail) that displays the image it starts loading then no image is displayed only a black window.
The links I use:
<img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/>
The script/link/init :
These imports are working, I verify it by using(in Chrome) Inspect element->Network.
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
notes:
1-I'm using Shadowbox as a jQuery plugin(NOT standalone).
2-jQuery is imported to my website using Google(NOT locally).
3-The real image size is 3000x2400.
Edit:
4- I realized that when right clicking->inspect element(in chrome) , the image is shown(but not in a proper way, only half of it is shown).
5-when setting handleOversize to drag the image is shown(Must click).
6-It is working in IE 9!.
You're saying that the image is not showing properly in the browser?
It may mean that the file is corrupted. Try re-saving it.
I've been using Shadowbox for quite long time now and similar problems were always caused by bad files or the files permissions not been set properly.
Since your providing an example that is local host, I can only offer general guidance and not tell you exactly what the problem is. A link surely would be welcomed.
First, make sure your call to jQuery is before the call to shadowbox.js file.
Other than that I'm sure you've given the webpage a valid !DOCTYPE which makes your Shadowbox markup correct so far as I can see at this point.
The problem could be with using jQuery and your Class Name of thumbnails.
If jQuery has modified the link with a particular style, Shadowbox may be subject to any changes in it's anchor tag.
Those changes then will cause the Shadowbox per link element to not see the original link since it's now a jQuery link. It will need to be re-cached by Shadowbox.
Solution: Try making the call to Shadowbox.init after any modifications to the thumbnail have been completed so Shadowbox caches the link once, or if needed use Shadowbox API .clearCache(); and .setup(); to re-cache those rel anchors.
I should also mention that you should ensure Shadowbox has the jQuery Adapter interface which is a download option or WordPress Plugin option.
I found the solution, It wasn't in the DOCTYPE or the browser or even my JS code!
The problem was in the CSS.
Setting the direction to right to left(rtl)(yes, the website is Arabic).
caused the images to be hidden, maybe, because the image went right and I cant see it.
It's an old question but no one answered correctly to this subject.
solution is here:
just replace "left" values with "right" and "right" values with "left" in shadowbox.css
Open the shadowbox.css and set direction:ltr for #sb-container