I try to use the Fluidbox script with the bootstrap tab plugin. When I click on a tab, new images appear. They are in a container and the opacity goes from 0 to 1.
By default the first container opacity is set to 1.
Fluidbox works well with that container but not with the other. I suspect that it has a link with opacity change. Any ideas?
Page with the problem: http://urlgone.com/2d0035/
It seems Fluidbox does not work on any images that are set to display none. And in your case inside of a parent element that is set to display none.
The way you get around this is to get fluidbox to fire before the image or element is hidden. I was using easytabs, so I placed it's call inside of a window load function which gave fluidbox enough time to fire before easytabs hid the photos.
$(window).load(function() {
$("#tab-full-container").easytabs();
});
Related
I am making a preview box that pops up when you click a gallery image and need to make it disappear when you click outside of it. I found many solutions but none work with my code. I think the problem is I may need a while loop but I tried several conditions and all were infinite.
This is the last solution I tried. The preview works but I can't get it to close when I click out.
DEMO
$('.portPic').click(function() {
if ($(this).attr('data-src2')) {
$('#clickedImg').attr('src', $(this).attr('data-src2'));
} else {
$('#clickedImg').attr('src', $(this).attr('src'));
}
$('#clickedImg').css('visibility', 'visible');
$('#clickedImg').blur(function() {
$('#clickedImg').css('visibility', 'hidden');
});
});
I've done a similar thing with a pop-out menu, where the user clicks "off" the menu and it closes. The same can be applied here.
I used an overlay div which spans the whole screen (with a translucent opacity - maybe 0.6 black or similar; or whatever colour you want) which gives a nice modal effect. Give it an id - let's say modal-overlay.
You can put it static in your page code, and set the display to none and make it the full-size of the page (through a CSS class).
<div id="modal-overlay" class="full-screen-overlay"></div>
Set the z-index of the overlay to higher than the rest of your page, and the z-index of your popup to higher than the overlay. Then when you show your popup, also set the visibility of the modal-overlay to visible, too.
In your script code, put an event handler for when the modal div is clicked:
$('#modal-overlay').click(function() {
$('#clickedImg').hide();
$('#modal-overlay').hide();
})
I would also use the .hide() jQuery method, which is easier than typing out the visibility.
Better still, if you have more than 1 thing going on (which you would with a modal overlay), wrap your "show/hide" of the popup in a hidePopup() or closePopup() method and call it onClick to save re-using code.
For effects when opening the popup/overlay, you can also use jQuery animations like .fadeIn() or .slideDown(). Use fadeOut and slideUp to hide.
These animations also perform the showing/hiding, so you wouldn't need to call .hide() or .show().
Check out this link to jQuery's API documentation for animations. Very useful and a good read.
Hope this helps!
You'll need to create a seperate div that is most likely fixed position that sits just one step lower (z-index) than your popped-up image. Attach a click handler to this div (overlay) and do your showing/hiding functions in there.
You can use modal photo gallery.
http://ashleydw.github.io/lightbox/
You can use this codepen code, too. SO is not letting me post the link here. So serach using thi "Bootstrap Gallery with Modal and Carousel".
Hope this helps..
I am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks
The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.
I'm using the following code:
$("#galleries").load("letters/index.php");
$(function(){
$('#galleries').hide().fadeIn(1500);
});
everything works fine. My problem is, I got about 8 scripts like that, and whenever I switch the content of the div, it doesn't do that smoothly, first of all, it clears the DIV and let me see that for about 0.7 seconds, after that, it loads ALL of the content within a second, and it's really disturbing my eye.
I thought about a solution, that I will get the height of the page I wanna load, and then set the DIV height to that height, and then load the info. Will it work? because, the LOAD function removes everything from the div, will it remove the height property as well?
generally, this is what im trying to achieve:
//GET TARGET'S HEIGHT
//SET #galleries TO THAT HEIGHT
$("#galleries").load("letters/index.php");
$(function(){
$('#galleries').hide().fadeIn(1500);
});
I don't know how to get the target's height and set it. But anyways, will it work? or maybe someone has another solution for me?
Thanks in advance!
You aren't using the complete callback of load() which allows you to run code after content is loaded.
Try something like this:
$(function(){
/* hide first, then load*/
$('#galleries').hide().load("letters/index.php", function(){
/* new content now exists*/
$(this).slideDown()/* or fadeIn() or any other effect*/
});
});
SlideDown is not dependent on overall height so will smoothly move content below it down
I'm trying to get content from a set of hidden (display:none) divs to display on a main "display" div using innerHTML. That part has no problem. However, flexcroll does not seem to load the moment I change the content of the "display" div using innerHTML, even after calling the updateScrollBars method.
Here is the code in question:
function switchdis(IDS) {
caredet = document.getElementById('caredet');
carednew = document.getElementById(IDS).innerHTML;
caredet.innerHTML = carednew;
fleXenv.updateScrollBars();
}
I'm not too sure what is the problem. It seems to me like the function is called (I can scroll using the mousewheel) but the scrollbar is not appearing at all. For the record, my custom scrollbar works fine on other pages. On another page, I used the method of hiding and unhiding divs to change content within the page; the updateScrollBars() method works there when I call it after unhiding a div.
But somehow with innerHTML it doesn't seem to work. Does anyone know why?
I solved this issue.
Realised I was updated the innerHTML of the div with flexcroll applied. If anyone is having similar problems, DO NOT DO THAT. Instead, create another div within the flexcroll master div and change the innerHTML of that div.
Additionally, remember to update your flexcroll scrollbars and optionally shift the scroll position to the top every time the innerHTML of that inner div is changed.
So I'm trying to make a simple lightbox on a concert listings page. You click a listing (.performer), and then an info box (.lightboxinfo) gets overlaid while a semi-opaque white div lightens the rest of the screen (#whitepage). Then, you click anywhere on the screen, and the box and white div disappear.
Everything works fine except the final z-index changes. The box and white div become fully transparent, but the z-index clearly haven't been changed since I can't click on any links.
Anyone know what I'm doing wrong? Thanks so much!
The javascript is below:
$('.performer a').click(
function(){
$('.lightboxinfo').css('z-index','110').animate({opacity:'1'}, {queue:false,duration:500});
$('#whitepage').css('z-index','100').animate({opacity:'0.4'}, {queue:false,duration:500});
});
$(document).click(
function(){
$('#whitepage').css('z-index','-100').animate({opacity:'0'},{queue:false,duration:100});
$('.lightboxinfo').css('z-index','-110').animate({opacity:'0'},{queue:false,duration:100});
});
});
Why mess around with the z-index when you can set 'display:none' after your opacity becomes 0?
// when appearing
$('#whitepage').css('opacity','0').show().animate({opacity:'0.4'}, 500);
// when disappearing
$('#whitepage').animate({opacity:'0'}, 100, function () {
$('#whitepage').hide();
});
Also, each time you click on the performer link, you're adding another event handler to the document. You may want to do that only once, outside of the click and only if the whitepage is visible.
$('.performer a').click(function () {
});
$(document).click(function () {
$('#whitepage:visible').animate(...
});
This is a bit difficult to answer as you haven't given the HTML and CSS, but there are a few things you should probably look at.
I assume your lightbox divs are positioned absolutely. Any (container) elements that you want to appear over them must be positioned relatively or absolutely or z-index will have no effect and relatively / absolutely positioned elements will always be on top of them.
You're animating the opacity manually, rather than using jQuery's built in fadeOut animation. Apart from giving compatibility with browsers that don't support opacity, fadeOut also sets the hidden element to display: none. This allows you to click on stuff that would otherwise be underneath the lightbox, whereas just reducing the opacity to 0 still leaves the element there and able to accept and block clicks. (So using fadeOut also means you'd no longer have to toggle the z-index.)
This is not directly related to the problem you mentioned, but both of the events you've set up will fire when you click on a .performer a link. (I think this is why you've prevented the animations from being queued: both will run together and the one that sets the opacity to 1 wins as it finishes last.) This does, however, stop the lightbox getting the z-index you want. To prevent this happening, you either need to set the close lightbox click event to #whitepage or stop the event propagating.
$('.performer a').click(function(event)
{
$('.lightboxinfo, #whitepage').fadeIn(500);
event.stopPropagation();
});