I am opening fancybox automatic when page load and for this, I am using trigger method with a hidden link inside the page, The problem is fancybox popup loading but its missing overlay, just that overlay is not opening.
I am using fancyBox v2.1.5
This is the code I am using
$(".login_signup_lb").fancybox({
maxWidth: 450,
autoSize: true,
fitToView: true,
openEffect: 'none',
closeEffect: 'none',
closeBtn: false,
helpers: {
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.6)'
}
}
}
}).trigger("click");
This is the html code which is hidden in the page
<a id="login_signup" class="login_signup_lb fancybox.ajax" href="fileurl.html" style="display:none;">
Lightbox
</a>
Try to trigger after creating fancybox
$(".fancybox.ajax").eq(0).trigger('click');
Here is jsfiddle
Related
$.fancybox({
content: '<button>prev</button><button>next</button>',
href: src,
'autoScale': false,
'transitoinIn': 'none',
'transitionOut': 'none',
.......
});
I simply open images in fancybox. I want to add some html button in fancybox but problem is that it is override the image. but I don't want to override the image so I want to add button outside the image.
Any help?
How about you try having z-index?
<style>
.btn1 {z-index: 5;}
</style>
<html>
...
<html>
<script>
$.fancybox({
content: '<button class="btn1">prev</button><button class="btn1">next</button>',
href: src,
'autoScale': false,
'transitoinIn': 'none',
'transitionOut': 'none',
.......
});
Or you can try having your buttons in the html and position it to absolute.
I have radio button code below, when I clicked on that need to open fancybox modal window but while clicking it is saying 'the requested content cannot be loaded'.
$(document).ready(function(){
$("#cncstoreloc").fancybox({
target: this,
href: '#cnc',
width: 1080,
height: 400,
autoSize: false,
autoCenter: true,
scrolling: 'auto',
titleShow: false,
title: null,
centerOnScroll: true,
margin: 0,
padding: 30,
//type: 'iframe'
afterShow: function(){
$('#quicksearch').on('click', function(){
$('#cncstorepane').css('display','block');
});
},
afterClose: function(){
$('#radio_check').removeClass('radio_chk');
}
}).on("click", function (evt) {
$('#radio_check').addClass('radio_chk');
});
});
Radio button code:
<div class="" id="clickncollect_form">
<input type="radio" id="cncstoreloc" name="cncstoreloc">
<label for="cncstoreloc">Test</label>
<span id="radio_check" class="check"></span>
</div>
Content div to load in fancybox modal window:
<div style="display:none">
<div class="main-container" id="cnc">
<h1>CLICK & COLLECT</h1>
</div>
</div>
Does anyone have any idea instead of loading the content why it's throwing an error.
OK so I have a Jquery plugin that works great and all except it puts all of the images on top of each other until the plugin has finished loading, and then they all go into place. Is there a way to have the first image be a placeholder for the size 843 w 345 h and have it load hidden until they are all ready so my page site doesn't expand down then back up when it has loaded. thanks!
$(window).load(function(){
$('#slide-me').carousel({
style: 'fade',
transitionSpeed: 'slow',
carouselSpeed: 3500,
arrows: true,
buttons: false,
buttonsTheme: 'lines',
stopOnHover: false,
carouselHeight: 'crop',
carouselWidth: 'crop'
});
});
html
<div id="slide-me">
<img src="/tour/images/bigslider1.jpg" />
<img src="/tour/images/bigslider2.jpg" />
<img src="/tour/images/bligslider3.jpg" />
<img src="/tour/images/bligslider4.jpg" />
<img src="/tour/images/bigslider5.jpg" />
</div>
Give it a try, worked for me:
$(function(){
setTimeout(function(){
$('#slide-me').carousel({
style: 'fade',
transitionSpeed: 'slow',
carouselSpeed: 3500,
arrows: true,
buttons: false,
buttonsTheme: 'lines',
stopOnHover: false,
carouselHeight: 'crop',
carouselWidth: 'crop'
});
},500);
});
I actually got the answer for this and wanted to share in case anyone wanted to see it.
In my css all that was needed to do was this
#slide-me img { display: none; }
#slide-me img:first-child { display: block; }
Which allowed the first image to be shown first and hide the rest while script loaded.
I have a lightbox where each pictures has an anchor.
But the anchor doesn't show the specific ID for each pictures, it appears like this in the URL bar :
www.mywebsite.com/gallery.php#example/1
www.mywebsite.com/gallery.php#example/2
www.mywebsite.com/gallery.php#example/3
So, I wonder if it's possible to show in the URL bar the specific ID :
www.mywebsite.com/gallery.php#bird
www.mywebsite.com/gallery.php#dog
www.mywebsite.com/gallery.php#cat
Any ideas ? Thanks.
Html
<ul class="thumbnails" id="my-gallery">
<li class="span2">
<a href="images/full/example-bird.jpg" class="thumbnail" id="bird">
<img src="images/thumbs/example-bird.jpg">
</a>
</li>
<li class="span2">
<a href="images/full/example-dog.jpg" class="thumbnail" id="dog">
<img src="images/thumbs/example-dog.jpg">
</a>
</li>
<li class="span2">
<a href="images/full/example-cat.jpg" class="thumbnail" id="cat">
<img src="images/thumbs/example-cat.jpg">
</a>
</li>
</ul>
Script
$('#my-gallery li a').iLightBox({
skin: 'dark',
path: 'horizontal',
fullViewPort: 'fill',
infinite: true,
linkId: 'example',
overlay:{
opacity: 1,
blur: false
},
controls: {
thumbnail: false
},
styles: {
nextOffsetX: -45,
prevOffsetX: -45
}
});
It's difficult to suggest an appropriate solution since I can't test iLightBox.
Referring to the iLightBox website, you could use the callback provided:
$('#my-gallery li a').iLightBox({
skin: 'dark',
path: 'horizontal',
fullViewPort: 'fill',
infinite: true,
linkId: 'example',
callback: {
onShow:function(api) {
$(location).attr("hash",$(api.currentElement).attr("id"));
}
},
overlay:{
opacity: 1,
blur: false
},
controls: {
thumbnail: false
},
styles: {
nextOffsetX: -45,
prevOffsetX: -45
}
});
I highlighted the lines I inserted. My approach is using the callback for the onShow-event of the iLightBox for changing the Hash with jQuerys $(location).attr("hash","value");.
The problem is that I'm not sure if onShow is the correct event to hook into and if currentElement is in fact the anchor or not. This is something you have to find out yourself. I'm sorry.
Edit
I think if you're doing it my way, you have to remove that linkId from your parameters.
Edit
I tried something on the test page you linked above.
This code works fine for me if I paste it into the console:
$('#deeplinking_looping_gallery li a').iLightBox({
skin: 'metro-black',
path: 'horizontal',
fullViewPort: 'fill',
infinite: true,
overlay: {
opacity: 1,
blur: false
},
callback: {
onBeforeLoad:function(api) {
$(location).attr("hash",$("#deeplinking_looping_gallery li").eq(api.currentItem).children("a").data("caption"));
}
},
controls: {
thumbnail: false
},
styles: {
nextOffsetX: -45,
prevOffsetX: -45
}
});
Edit
Loading an image at page load should be possible with this line of code:
$("a[data-caption='" + $(location).attr("hash").substr(1) + "']").trigger("click");
It triggers the click event for the appropriate anchor (like if you click it with your mouse).
I am trying to popup the url using the lightbox, when i click the button, the lightbox call has been made, but the given url is not pop-up in the light box.
when i click the button it is showing popup with just small white screen
here is code i have used
code:
<a class="example-image-link" href="uitab/index.html" data-lightbox="example-1"><input class="buton" type="button" value="View details" name="View details"></a> </td>
how can i solve this?
try to use something like that may be it helps
<a class="various fancybox.ajax" href="uitab/index.html">Ajax</a>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
and read the example url here
http://fancyapps.com/fancybox/