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;
Related
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">
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'm having a problem with the Facebook Like Button here. Although the button works, it's fetching the wrong thumbnail to display on Facebook.
Since the website is a store and each product has its own like button, it's very important that the correct thumbnail is displayed on Facebook. I used the Facebook Linter to debug a product URL from the site. I hoped Facebook would grab the bigger, obviously main image of a product URL but it's fetching one of the related products thumbnail.
From what I've read in the docs, I should explicitly set og:image in the head of my document. However, I have no access to the back-end and I can only use JavaScript to dynamically generate a meta-tag. I've tried to do that but it seems worthless doing so since the URL is scrapped before any script is run.
I don't understand what rules Facebook is using to infer the value of og:image. On another website that also doesn't have any meta-tags set, the main image of the product is being correctly scrapped. Why?
When, for whatever reason, one cannot declare any Open Graph properties, what can be done to improve the chances of Facebook's algorithm grabbing the desired image (or text)?
Ideally, you should set og:image meta tags as part of the open graph protocol. When this fails, it simply defaults to all images via image html tags take into precedence. The very first image defined via img tag will be the first image pulled by facebook.
<html><body>
<p style="background:url(img0.jpg);">hello</p>
<img src="img1.jpg">
<img src="img2.jpg">
<p>bye</p>
<img src="img3.jpg">
</body></html>
If the above sample code was your site, facebook would label img1, img2 and img3 as potential thumbnails and in that order if the user has the option to choose what image to specify.
So, just put your product picture first.
I am making a games website and I have little knowledge in computer language and I need to create a lightbox that will appear when a image is click linking to this box. The box doesn't need to be too fancy or anything, all i need is for it to have an embedded flash games at a set size without scrolling. I have had a look at jquery and mootools but I find them confusing and don't know how to embed a flash based game inside them, so any help would be very useful.
PrettyPhoto jQuery makes it easy to lightbox media such as Flash.
From their example:
<a title="Flash 10 demo" href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294" rel="prettyPhoto[mixed]">
<img src="/wp-content/themes/NMFE/images/thumbnails/flash-logo.jpg" alt="Flash 10 demo" width="50"/>
</a>
Put a link to the SWF with rel=prettyPhoto[groupName] in your anchor.
Within the anchor, you may place an image thumbnail.
<a href="flash.swf" rel="prettyPhoto[group]">
<img src="thumbnail.png" />
</a>
Download source.
One simple solution that I think might be good looking would be having a container that's hidden from start. When you click at the image this container turns visible. This way you don't have to embed flash to jquery/javascript but to html.
With jquery it would look like this.
$(document).ready(function(){
$('#yourimage').click(function(){
$('#containerwithgame').show();
});
});
This way you don't use an annoying pop-up lightbox, but that's a personal opinion.
SHORT VERSION
Can anyone offer me a JS image viewer which supports mechanism of passing image array on construction?
LONGER VERSION
I'm using Colorbox to view some images on a page.
The situation I desire is:
I add an image to viewer from <a> tag on a thumbnail (using class name, for example)
I add more images passing image hrefs to viewer object (thumbnails of these images aren't shown)
When I click on my first (and only) thumbnail, a viewer opens with big version of thumbnail PLUS added images via viewer object.
The situation I got:
- I put empty <a> tags (which I also make invisible in CSS) pointing to additional images I want to add (which don't have thumbnails).
Can anyone offer me a JS image viewer which supports such mechanism of passing image array on construction?
You're almost there.
In Colorbox, you create groups of things using the rel option. For example:
$('.thumbnail').colorbox({rel: 'colorboxImg'})
The above code means that when you click something with a class of thumbnail, the image viewer will open up and load all of the items that have a class of colorboxImg.
So, the "situation you got" (as you put it) is pretty close. Add a bunch of your hidden <a> tags and make sure the hrefs point to the right images. Give those <a> tags a class of colorboxImg (or whatever you decide to name your group) and you're done. Keep in mind that the .thumbnail also needs to have a class of colorboxImg.
Let me know if you have any other cases you need to satisfy and we can edit this answer.