I am trying to get the fancybox plugin to work nicely with the awkward slider.
The fancybox pop-up works but only for the first image. The other images don't work.
It seems that once the awkward plugin has been clicked the fancybox plugin is not working anymore.
No firebug errors in console. Here is the example: http://www.awkward.interfacecreation.com/
Any ideas?
Awkward slider creates the elements on demand and events are lost for unloaded elements.
Try using the .live function of jQuery to call the events
$(".awkward a").live("click",function(){
$.fancybox({
'href' : 'bigimage.jpg'
});
});
Related
I'm trying to figure out what is the correct way of calling custom scrits on Prestashop v1.7
I've place them into custom.js file, script is loaded just fine and it works, but only once. As in, if I change anything on that page, click on any of the attributes, my scripts stops working.
For the life of me I can't figure out why, everything worked just fine on 1.6+ but now it won't anymore.
Script I'm using is basic jQuery click function and it's used when I click one of the attributes:
$("input[value='1']").click(function() {
$("#somediv").addClass("someClass");
});
$("input[value='2']").click(function() {
$("#somediv").removeClass("someClass");
});
So this click will work, but only until I click any attribute, then it stops working.
Does anyone know why is this happening?
I am having huge problems with the jquery mobile pack, it broke my entire page by making links go to ajax and showing the loading div etc. I tried fixing them all and I somehow managed it with tons of excess code (I don't know what part exactly hid the loading part and which part undid the ajax).
Basically JQuery mobile made a mess of my page, and all I need is the swipe event, I found the github repository of jquery mobile (Here), but I honestly have no idea which parts to take so I can use the swipe event.
I know people want code, but there is no problem in my code here, JQuery mobile simply wants to open all links in ajax, and because I am using bootstrap and I don't use JQuery mobile for anything else but swipes, I won't be pasting anything.
If anyone can tell me which parts I need to take/modify to make it work that would be awesome.
I tried by only copying the events/touch.js but it didn't work.
If you want to navigate page without using ajax then you should add tag rel=external
Or data-ajax="false"
you can find more information for Jquery mobile HERE
EDITED
I have Another solution but I pesonally not prefer but I also having same issue before so I tried this solution
$(document).ready(function(){
$("a").click(function (){
window.top.location = $(this).attr("href");
return false;
});
});
Try this I hope its work for you too..
this function will force change document location when user click on any Hyperlink
If you go to http://sandkasse.shoporama.dk/, you will see a bxslide at the top of the page. at least, you will if you do not use chrome (Peculiarly, the problem seems not to occur in safari, IE or firefox).
I am experiencing the problem that quite often when loading the page from chrome, the images to be used in the bxslider do no load. refreshing usually solves the problem. All I get is the two buttons for switching slides, however nothing happens when these are clicked.
I don't get any error messages.
I am assuming that the problem is that the images have not finished loading when the $('.bxslider').bxSlider(); is called inside the $(document).ready(function(){}).
However, what is a good fix to this? if I move the bxslider call to window.load, I get the somewhat ugly result that all the images in the slide are shown until the whole page has finished loading, with the wrong width and styling. I suppose I could change the visibility and styling of all the images until the page finishes loading, but this seems more like a hack than a solution?
would it be a sensible choice to use some sort of imagesloaded event instead of document.ready? the imagesloaded package is included anyway. but, I suspect I would run into the same problem of all images showing until the last had loaded?
A related problem may be the fact that the slider always skips to the last slide when the page is loaded, irrespective of which browser is used. I have "fixed" this by setting the "startSlide" manually.
I hope my question makes sense. I am aware that there are a lot of bxslider questions on here, but I haven't been able to find anyone solving this particular problem, except for people "giving up" and resorting to just hiding the images while things load?
I may have come up with a suitably non-hacky solution:
reload the slider in the window.load call. Thus, my bxslider call has transformed into:
var slider; // has to be defined beforehand so I can use it in window.load
$(document).ready(function(){
//initialize slider
slider = $('.bxslider').bxSlider({
startSlide:0
});
};)
$(window).load(function() {
slider.reloadSlider();
});
I'm using this plugin for displaying tooltips
Looking at this fiddle - http://jsfiddle.net/CmmUC/1/
You'll see that the tootip does not appear. It works if you change the javascript to
$('.tooltip').tipsy({ gravity: 'w' });
Why does plugin hate 'focus'? Am I missing something obvious that's causing the issue?
I'm working in the latest stable Chrome.
see my updated version of your fiddle:
http://jsfiddle.net/CmmUC/7/
basically you need to add the option trgger: 'manual' upon instantiation and maually show/hide the tipsy using the jquery hover function.
I'm using the http://fancyapps.com jQuery plugin Fancybox v2. It took me a while to see the error, but here it is.
I only know how to debug "progressively" or "step by step" in Google Chrome, so in Chrome, access developer tools and then select the SCRIPTS tab. From there, make select "Pause on uncaught exceptions" here (http://drm.st/ELqh), then click on one of the thumbnails at the top left of this page: http://dreamstartest.net/#!/gallery/ (site in development).
These should load the linked images inside Fancybox's modal popup, however, it's throwing a Fancybox is not defined error. What's really throwing me off is that Chrome Dev Tools RESOURCES tab doesn't show any scripts which failed to load. So why is the function undefined? Any insights would be greatly appreciated, this has been killing me for hours now.
In your scripts js file you have this function (line 25):
$("#content a[rel=video_box], a.video-box, a.fancybox").live('click', function(){
fancybox({
'hideOnContentClick': false,
overlayShow: true,
showNavArrows: true
});
});
The error you are getting is because the line
fancybox({
should be
$.fancybox({
However, you should also consider that since you are using Fancybox v2.x there is not need to use the .live() method. Additionally you are using jQuery v1.7.x where .live() has been deprecated.
Another thing is that you are using fancybox API options for v1.3.x. Check the documentation for fancybox v2.x since options are new and not compatible between previous versions.
Your function updated to v2.x should work better like:
$("#content a[rel=video_box], a.video-box, a.fancybox").fancybox({
closeClick: false,
arrows: true
});
Looks like jQuery is being loaded twice, once before Fancybox, and once after. The second time it is being loaded by a plugin - mp3-iplayer. I would remove the first link to jQuery from Google APIs, load the mp3-iplayer plugin, then Fancybox