determine my own fancybox order - javascript

I'm working on a website where images need a fancybox. The images are however not placed in a chronological order in the HTML because they are part of a booklet I realised using booklet.js. So my question is, can I determine in what order fancybox opens my images?
I have tried to get this to work for some time now and made a fiddle for demonstrative purposes.
http://jsfiddle.net/XF8WW/7/
In my fiddle I determine what image has been clicked and what the next/previous image can be. Next I check if fancybox opens the correct image on a first attempt. If it fails I try to close fancybox and open it myself for the correct image.
The only problem in my solution can be found in the last function I wrote (clickPage).
In clickPage I try to close fancybox and reopen it for the correct image. Unfortunately either fancybox doesn't completely close or it doesn't reopen for that image.
function clickPage($pageNr) {
$.fancybox.close();
//$('.fancybox-overlay.fancybox-overlay-fixed').click();
$pageNrMinOne = $pageNr - 1;
$pageNrMinOne = $pageNrMinOne.toString();
$pageNr = $pageNr.toString();
console.log($pageNr);
console.log($pageNrMinOne);
$(".page" + $pageNr).eq($pageNrMinOne).trigger('click');
//$('.page' + $pageNr).click();
}
I know the code works, because when I enter it in the console it does.
Thank you for your time
Have a nice day

Alright, I managed to fix it.
Rather than using this script for my booklet:
http://www.netzgesta.de/booklet/
which rearanges the HTML I used this script:
http://builtbywill.com/code/booklet/
The latter doesn't rearange the HTML and is in my opinion the best booklet script out there so far.
Thanks everyone for your replies!
Have a nice day

I recommend handling your data needs separately (instead of using img src), passing it into the fb sig as the first argument:
var images = [
{
'href' : 'http://dromenopmaat.be/dromen_op_maat/images/nl/1_big.jpg',
'title' : 'some title' //optional
},
{
'href' : ' http://dromenopmaat.be/dromen_op_maat/images/nl/2_big.jpg ',
'title' : 'some title'
},
//etc
]
$.fancybox.open(
images,
{
index : 0,
nextEffect : 'none',
prevEffect : 'none',
margin : 100,
padding : 10,
type : 'image',
wrapCSS : 'fancy-gallery-wrapper',
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.7
},
title : {
type : 'inside'
}
}
});
(fancybox v2.0)
Ultimately, you are making your project overly complex, needlessly.
Build a json object in the order you wish, and send fb whatever extra params you might need (i just pulled this from a project, so tailor as you see fit).
Hope that helps -

Related

HTML form doesnt allow spaces on inputs

I have an HTML form loaded in via ajax to a lightbox.
You can see the behaviour on the homepage of http://www.powerbuy.com.au/
In the bottom right of the page there is a Link 'Let us negotiate a deal for you' Clicking this creates a lightbox and loads the form.
The issue is that you cannot put in spaces to any of the fields, it appears to be accepting any other characters, numbers and symbols, but not spaces.
I have looked through the code for any keyCode in the JS, but I cant find anything related to spaces.
Can you replicate the issue? Can you tell me what is going on?
You can simply write below code:
$(document).ready(function(){
$("#id").keydown(function(event) {
if(event.shiftKey)
{
event.preventDefault();
}
if (event.keyCode == 32) {
event.preventDefault();
}
});
});
"id" is your textfield "id" attribute value.
Cause unknown:
Solved by converting lightbox popup from ajax load to iframe.
You can fix it by setting enableKeys : false as following:
Shadowbox.open({
title : "Nouvel Addressee",
content : $("addressee-lightbox-wrapper").innerHTML,
player : "html",
width : 920,
height : 540,
enableKeys : false,
options : {
onFinish: function() {
Event.addBehavior.reload();
}
}
});
I had similar problem. Found out, it has something with 'enableKeys' option.
There is more ways to set this option, but for some reason just this one worked for me:
Shadowbox.init({
skipsetup: true,
enableKeys: false
});
Here are some other solutions mentioned http://shadowbox.1309102.n2.nabble.com/Can-t-add-space-in-text-input-td4518072.html

Javascript sliding Image Gallery - no jQuery

Does anyone have any tips on making a pure JS image slider? I am looking to have it pause after each image and restart after going through all the images. All that I can find are jQuery plugins and I am look to do this with only JS.
i'd go for something like this:
var sliderTool = {
_totalItems : 0,
_visibleItems : 6,
_currentOffset : 0,
_timeout : null,
next : function(){
...
},
prev : function(){
...
},
play : function(){
...
},
pause : function(){
...
}
};
as a base.
every time you set timeout, save it into the _timeout field so you can clearTimeout(sliderTool._timeout) whenever you want.
next and prev can contain animations or just a simple image replacement. you can add a separate timeout for animation and for intervals between slides.
you can add an "add()" method to the sliderTool and on window.load or "body onload" add all the images and then run the start() method. you can also dynamically add images after page is loaded
maybe also add init() for autoloading and basic setup.
again, this is a basic draft of a possible solution. once you get running you'll probably run into more specific questions. Overall, as an approach, i recommend trying to come up with some solution first before asking for a general advice ;)

My jquery code is working in google chrome console not after saving it?

i have to select and deselect images and Jquery my code is working fine in Google developer console but not after i save it in my file.
This work in chrome developer console not when i have it in my code
image
This was the last question which i asked it is related to thisReference
mycode
$(document).ready(function() {
var selectpic;
$('img').click(function () {
$('img.highlight').not(this).removeClass('highlight');
$(this).toggleClass('highlight');
selectpic = $(this).attr('src');
});
});
This is actually inside a popup div.
main window which calls the above popup
function showImageUploadDialog(event) {
$(".ui-widget-overlay").show();
cdDiv();
$('#gallery').hide();
$('#upload_popup').dialog({
height : 'auto',
width : '848px',
modal : 'true',
top : '58px',
left : '559px',
resizable : 'false',
dialogClass : 'pop_up'
});
$(".ui-dialog-titlebar").hide();
}
I think it should be made global,And I don't know how to make it.
it worked after updating to the latest version of jquery!!

Javascript Fancybox 1.3.4 Solution but needed it further explained please

This answer has been taken from this post:
Fancybox problem on iPhone
This was voted as best answer but I am new and still learning at js and I am having such a difficult time putting this all together, can someone help me with some more detailed instructions?
Fancybox attempts to auto resize and center itself everytime that the
browser window is resized, and this event gets triggered a lot on
iPads and iPhones. For fancy box 1.3.4, the code which controls this
is line 608: $(window).bind("resize.fb", $fancybox.resize);
To fix the issue, I modified this part of the fancybox JS, and added
another option called "resizeOnWindowResize", which you can set to
false for iPad and iPhone users, or just disable all together.
if(currentOpts.resizeOnWindowResize) { $(window).bind("resize.fb",
$fancybox.resize); } You must also add a default value for this
option in $.fn.fancybox.defaults hash map.
Then, when calling fancybox you can utilize this new option:
$('#fancybox_link').fancybox(${'scrolling': 'no',
width: 'auto',
height: 'auto',
centerOnScroll: false,
resizeOnWindowResize : false});
I got as far as go to line 608. I really do not know what to do next. What should the final product look like after you've added "resizeonwindowResize" and the if statement?
Add this:
if(currentOpts.resizeOnWindowResize) {
$(window).bind("resize.fb", $.fancybox.resize);
}
Where you find:
$(window).bind("resize.fb", $.fancybox.resize);
Near the bottom of:
$.fn.fancybox.defaults = { //blah blah blah options here.
onComplete : function(){},
onCleanup : function(){},
onClosed : function(){},
onError : function(){},
// Add this
resizeOnWindowResize: true
};
Then save and when you call the fancybox:
$('.photo_gallery a').fancybox({
resizeOnWindowResize: false
});
This is also an alternative. Just replace the $.fancybox.resize function to as follows. It's just adding a simple userAgent check to avoid the .center call for iPhones.
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
if(!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
$.fancybox.center(true);
}
};

Javascript and jQuery (Fancybox) question

Javascript and jQuery (Fancybox) question
I'm using the Javascript function below for Twitter sharing (as well as other services; the function code is simplified to just Twitter for this question) that grabs the to-be-shared page URL and title and it is invoked in the link with onclick. That results in the Twitter share page loading in a pop up browser window, i.e.<img src="/images/twitter_16.png" onclick="share.tw()" />
In order to be consistent with other design aspects of the site, what I'd like to be able to do is have the Twitter share page open not in a standard browser window but in a Fancybox (jQuery) window.
Fancybox can load an external page in an iFrame when the img or href link contains a class (in this case class="iframe" ) in the link and in the document ready function in the header.
Right now, of course, when I give the iframe class to the link that also has the onclick share.tw(), I get two popups: one browser window popup with the correct Twitter share page loaded, and a Fancybox jQuery popup that shows a site 404.
How can I change the function to use Fancybox to present the Twitter share page? Is that a correct way to approach it? Or is there a better way, such as implementing the share function in jQuery, too?
Thanks...
Javascript share function:
var share = {
tw:function(title,url) {
this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
},
share:function(tpl,title,url) {
if(!url) url = encodeURIComponent(window.location);
if(!title) title = encodeURIComponent(document.title);
tpl = tpl.replace("##URL##",url);
tpl = tpl.replace("##TITLE##",title);
window.open(tpl,"sharewindow"+tpl.substr(6,15),"width=640,height=480");
}
};
It is invoked, i.e.: <img src="/images/twitter_16.png" onclick="share.tw()" />
Fancybox function, invoked by adding class="iframe" in the img or href link
$(".iframe").fancybox({
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
No matter how you change your design, using an iframe with Twitter isn't going to work.
If you replace the URL http://twitter.com with anything else eg http://www.godaddy.com - it will work. I tried something like below:
$('h1').click(function(e) {
$.fancybox({
href : 'http://www.godaddy.com', // http://twitter.com will not work here
title : 'twitter window',
width : 640,
height : 480,
type : 'iframe'
});
});
This is because Twitter uses javascript to "break" iframes on purpose for security reasons.
So your idea of showing a FancyBox iframe in this way cannot work if using Twitter.com. There is confirmation of this and some ideas on getting around it here: (like using API calls from an iframe) - http://groups.google.com/group/twitter-development-talk/browse_thread/thread/b1bca9ef074086c7
For your "other services" that hopefully don't have the same restrictions (I suspect some of them might) then the other answer further down the page from wajiw seems a good compliment.
My approach would be to remove the fancybox initialization and trigger it directly from your share function:
var share = {
tw:function(title,url) {
this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
},
share:function(tpl,title,url) {
if(!url) url = encodeURIComponent(window.location);
if(!title) title = encodeURIComponent(document.title);
tpl = tpl.replace("##URL##",url);
tpl = tpl.replace("##TITLE##",title);
$.fancybox({
'href' : tpl,
'title' : title,
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
return false;
}
};
I'm not sure my syntax is correct, but something like that should work for you.
Another different attempt may be to use a dummy anchor, alter it's attributes, and trigger click on it:
jQuery(document).ready(function() {
$("#dummyLink").fancybox({
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
return false;
}
};
});
var share = {
tw:function(title,url) {
this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
},
share:function(tpl,title,url) {
if(!url) url = encodeURIComponent(window.location);
if(!title) title = encodeURIComponent(document.title);
tpl = tpl.replace("##URL##",url);
tpl = tpl.replace("##TITLE##",title);
$("#dummyLink").attr('href', tpl);
$("#dummyLink").attr('title', title);
$("#dummyLink").trigger('click');
return false;
}
};
HTML:
What I see is that the window.open function, is responsible for opening the new browser window. This one should go. Instead you should be setting the href of a link like This goes to iframe, and then invoke the fancybox function.
It's been a while since I've used fancybox, I prefer using jquery-ui.dialog, so I could be wrong ..
I've run into this same exact issue using the jQuery Colorbox plugin. I was trying to make Share on Twitter and Share on Facebook links that would open up in the modal box. When you would open the links, the modal box would appear, however the iFrame would be blank and only a white box would be displayed.
Unfortunately, this is expected behavior. Both the Twitter sharing page and the Facebook sharing pages have instructions to break out of the frame when the link is followed, thus the blank box you're seeing. Since the content that is being delivered by the respective sites are not under your control, there is no way to stop this.
Its impossible with twitter as others noted.
If you View Source of Twitter homepage, you will see a small script like this just below the body tag.
<script>
if (window.top !== window.self) {
document.write = "";
window.top.location = window.self.location;
setTimeout(function() {
document.body.innerHTML = ""
}, 1);
window.self.onload = function() {
document.body.innerHTML = ""
}
};
</script>
Which means if you are in an iframe(self != top), pull out a blank page.
No workarounds are possible.
Perhaps take a look at http://platform.twitter.com/widgets.js and see how Twitter creates their popup, then figured out if you could stick that incide a widget.

Categories