How to change image href path inside fancyBox script - javascript

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!

Related

Lazy loading breaks lightbox

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">

Image Thumbnail Load behaviour (Pretty Photo Lightbox functionality preferred)

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.

calling video from wordpress gallery

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;

Why can't I link IMG elements to urls like "http://en.wikipedia.org/wiki/File:Batman_Lee.png"

I'm using google custom search to get image results. This is my first test and when I searched for Batman I got this URL found in Wikipedia: "http://en.wikipedia.org/wiki/File:Batman_Lee.png"
When I tried to use it an image element:
<img src="http://en.wikipedia.org/wiki/File:Batman_Lee.png">
I got a blank element. Why is this? Is wikipedia actively preventing people from linking to their images or is there any other reason?
Because the URL you are using is a file/page of wikipedia having image.
The absolute image URL is:
http://upload.wikimedia.org/wikipedia/en/a/a7/Batman_Lee.png
When you link the above URL within an <img> tag then it will work.
<img src="http://upload.wikimedia.org/wikipedia/en/a/a7/Batman_Lee.png">
Note: You can get the above URL by clicking right mouse button on image and copy the URL
SEE DEMO

Adding images to a javascript plugin

I'm creating an image gallery using the Galleria plugin.
I'm customised the styling of the gallery, editing css within the .js file, but there's one task that's got me stumpted:
I'm trying to replace the arrows that appear on either side of the image lightbox. They are currently created using type, but I need to replace these using images to be consistent with the rest of the site.
I've tried adding the images as I normally would using CSS, but it failed to display.
I'm not very experienced with Javascript so any tips on how to call images in CSS contained within Javascript would be gratefully received.
Here's a link to the code from the Javascript:
http://jsfiddle.net/tomperkins/TQDU7/
And here's a link to the plugin site if that helps:
http://galleria.aino.se/
Thanks in advance,
Tom Perkins
You just have to edit the "classic-map.png".. just make sure you map them in the same way ( put your button images at the same spot as the once already there )

Categories

Resources