I have one page scroll site(like f.ex. fullPage.js, fullContent.js), where fancybox is used to open up new content.
<a class="fancybox" rel="group" href="#content">
<img src="img/thumb.jpg" alt="" />
</a>
<div id="content" style="display:none;">
// content
</div>
Close button by default in fancybox is positioned absolute, which is not acceptable in my case - close button needs to be within specific div.
One way to trigger close is the following:
close
It does close content, but it drops to start position of website, not to section from where fancybox is triggered.
Any ideas how to get close button working so that after closing content, viewpoint doesn't change?
Interesting that default close button, which is enabled through js keeps viewpoint where it was before opening fancybox.
$(".fancybox").fancybox({
closeBtn : true,
});
Thanks in advance.
Use this:
close
This will stop the the browser to slide up.
Or you may also try:
<a href="#nogo"> or <a href="javascript:;">
Related
I'm triggering Fancybox popup automatically when the page is loaded.
Inside that popup there's a HTML content with link to other page.
That link doesn't work when it's loaded with Fancybox.
Here's my code:
<div class="popup">
<div class="container">
<h4>Description text...</h4>
<a class="btn btn-green" href="/the_url_of_the_page">View more</a> //this link is not working
</div>
</div>
<script>
$(document).ready(function() {
$('.popup').fancybox({
transitionEffect : "zoom-in-out",
}).trigger('click');
});
</script>
How can I set that link to work?
I'm using Fancybox v3.1.28
First, links, buttons, etc are working perfectly fine in fancybox.
The problem in your example is caused by the fact that you have used .popup selector to initialize fancybox, but that matches element containing your link. So, your code can be translated to 'start fancybox when user clicks on element having class ".popup"'. But, your link is inside element with class name ".popup", therefore it starts fancybox.
Finally, your code does not make any sense. If you wish to immediately start fancybox, then use $.fancybox.open() method, see https://fancyapps.com/fancybox/3/docs/#api for samples
I need to open an image on click listener
like this
and this should have close button also so that user can close it
i tried
<a class="need-help"><p>Need Help</p> <img src="<%=image_path('img/check-sample.png') %>" alt=""> </a>
I am thinking to append the img src tag to the anchor but i don't think it will work like the screenshot which i attached
any idea how to pop up image on the click of an anchor tag
If you're using bootstrap you can use the modal plugin
I am using the featherlight lightbox plugin to show the contents of a DIV when a button is clicked.
Here is my button:
<INPUT id="mileageButton" <cfif #get_trips.recordcount# NEQ 0>style="color:red; font-weight: bold;"</cfif> class="mileage" Type="BUTTON" VALUE="Mileage" onClick="$('##mileage-modal-open').trigger('click');"> <a id="mileage-modal-open" href="##" data-featherlight="##mileage" ></a>
Here is my DIV:
<div id="mileage" style="display:none;">
</div>
The problem I am having is that I do not want to DIV to be visible until the button is clicked, so I set the display attribute to 'none'. However it stays hidden all the time and consequently my lightbox is empty.
How can I have the attribute changed to 'block' when I click the button but back to 'none' when I close the lightbox?
Keep your DIV visible and put it inside another one that is hidden. That way, when featherlight opens it, it will show up.
I am using layerslider plugin to show rotating sliders on my homepage and those sliders are working as hyperlinks, one of the hyperlinks should go to a pop up menu, but it seems class="ls-link" is the only class I can use, and the Jquery pop has it is own class="open-popup-link", how can make the layerslider show that pop up when the user clicks on the slider?
How I can do that?
Layerslider code + standard slider hyperlink
<div class="ls-slide" data-ls="slidedelay:8000 ; transition2d:5;timeshift:0;">
<img src="/img/Slide1.png" class="ls-bg" alt="Slide background"/>
<a href="/users/login" class="ls-link" </a>
</div>
</div>
</a>
Regular html Hyperlink for pop up:
<a href="/users/register" id="register-link" class="open-popup-link" >Login</a>
Add class in it like class="ls-link open-popup-link".
Click
In the WordPress theme I am using there is an area for HTML banner code. At the moment it contains the following:
<a href="http://bathcitysound.com/streaming/player.html">
<img src="my-image-code-goes-here" /></a>
All is well and good, and it functions as it should and when clicked it goes to the specific page. However, what I actually want to happen is when the image is clicked, it opens a pop up window of 300 pixels wide and 600 pixels height with this as the address:
http://bathcitysound.com/streaming/player.html
What should I add to the existing code to make that work?
This should work:
<a href="javascript:window.open('http://bathcitysound.com/streaming/player.html','yourWindowTitle','width=300,height=600')">
<img src="my-image-code-goes-here" />
</a>
You can try in your browser, by going to this URL:
javascript:window.open('http://bathcitysound.com/streaming/player.html','yourWindowTitle','width=300,height=600')