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.
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 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;
I have very weird behaviour on my site
www.zrubex.eu
I've implemented PrettyPhoto gallery and on local server (wamp) everything works fine, but when I upload it to web server, only two of 42 images displays in full size after clicking on the thumbnail. It's 5th and 8th.
I researched it with firebug and it's trying to get three images after click on one image - the clicked one, previous and next. But the problem is, that it cannot find the image and displays warning that the path was not found. I don't know why those 2 images work and others don't.
The extension is capitalized thus making it not find the image.
I was watching your requests and its trying to request http://www.zrubex.eu/images/DSC00895.JPG... which of course doesn't exist.
But http://www.zrubex.eu/images/DSC00895.jpg does exist.
You have:
<img src="images/DSC00895t.jpg" width="96" height="96" alt="">
Fix the extension for the larger image and it will work.
<img src="images/DSC00895t.jpg" width="96" height="96" alt="">
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.
I am having a hard time searching for the answer to my problem. Mainly because I have no idea how to ask it in a google/yahoo search.
My site: http://www.wbsnightout.com/sidekick
On the right side I have three sponsor ad div's with images rotating. Each image has a title and is a clickable link. The only problem is, is that when you mouse over the image, the LINK and TITLE for the image BEHIND the shown image comes up. When I click on it, it takes me to the wrong link, because it's the link for the image behind it.
Here is an example of my HTML:
<div id="right-sponsor"> <!-- Begin right Sidebar -->
<div class="advertiseSlides" id="sponsor2">
<a title='Click for more Info!' href='http://www.ricochetsrapiddetail.net/' target='_blank' rel='nofollow'><img src='/images/advertise/ricochet_ad.jpg' alt='Ricochet's Rapid Detail' title='Ricochet's Rapid Detail' height='200' width='240' />
</a> </div>
This is pulled dynamically using php and mysql.
I have this before my closing body tag within a script tag
initImageGallery('sponsor1', 5000);
And my javascript file can be found: http://www.wbsnightout.com/sidekick/js/slideshow.js
I don't know much about javascript so I just used I script that I found online.
If you can answer or point me to a discussion or tutorial, that would be great!
Thanks,
You need to put this (add 'z-index:9999;' to .advertiseSlides img in css