We Keep Coding

Open fancybox Gallery after click event on a text

I found plenty of stuff on StackOverflow and tried different things to achieve what i want, but i'm stuck on this here.
I have a Text in my HTML, if i click this text a fancybox should open with an Image Gallery, the images should come from the images Array.
What happens now is that it's opening a broken fancybox, without any styling, opacity, closebutton whatsoever. Here's a example of what it looks like!
My Javascript is the following
$(function(){
$("#turn_all_pictures").click(function(){
if(images.length == 0){
loadImages();
}
$(this).fancybox();
$.fancybox.open(
images,
{
'autoScale': true,
'autoDimensions': true,
'centerOnScroll': true,
helpers:{
overlay:{
css:{
'background' : 'rgba(58, 42, 45, 0.95)'
}
},
buttons:{}
}
});
});
})
An entry in the Array looks like this, which should be right according to this Stack Overflow Q/A
Object { href="<img class="hidden_img fancybox" rel="turn_gallery" src="../../../images/1085/5263-3-medium.jpg"/>"}
The needed HTML is this:
<p><span class="turn_left" id="turn_all_pictures">Alle Bilder anzeigen</span></p><br>
What am i doing wrong, what do i miss so that the fancybox will open correctly formatted and with the image Gallery instead of the Text from the HTML?
EDIT
I tried out to append the images in my loadImages() function to a div and then ref to this div with my fancybox.
$.fancybox.open(
images,
{
// 'autoScale': true,
// 'autoDimensions': true,
// 'centerOnScroll': true,
// helpers:{
// overlay:{
// css:{
// 'background' : 'rgba(58, 42, 45, 0.95)'
// }
// },
// buttons:{}
href: '#hidden_pictures'
}
)
That will show all pictures, the whole div, in a fancybox, so i'm guessing that it has something to do with the images array

Check the location of your resources such as your CSS and images for fancybox. You can also inspect your DOM using firebug or some DOM inspection tool to see if your resources are ring found.
I used firebug and looked at the NET tab which showed the http request to the resource. You may see a 404 error if it's not found.

Check you have passed images array in a format like this:
[
{
href: 'image1.jpg',
title: 'title 1'
},
{
href: 'image2.jpg',
title: 'title 2'
}
]
make sure you have included the css properly (check the path)
Also see this

Jquery the event doesn't work the second time i call it

I have a page with an image gallery, and i am using jquery wookmark plugin, with filtering. Then i wanted to use also the plugin colorbox (wich wookmark already provides as an example in their plugin), and i was able to join the colorbox and the filter system. The issue in my head was, and when i aplly a filter, and instead of 50 photos to show, only have 5 visible, how do i say to colorbox to only show those 5?
So i initialize colorbox like this:
$('li a').colorbox({
rel: 'lightbox', scalePhotos: true, maxWidth: '80%', maxHeight: '80%'
});
Then on the click event of the filters, i thought the best way was to, whenever there was a click, remove colorbox from all images, and initialize colorbox again only for item inside li with active class, like this:
var onClickFilter = function(event) {
var item = $(event.currentTarget), activeFilters = [];
item.toggleClass('active');
// Collect active filter strings
filters.filter('.active').each(function() {
activeFilters.push($(this).data('filter'));
});
handler.wookmarkInstance.filter(activeFilters, 'or');
//here i remove colorbox from every item
$.colorbox.remove();
//here i instantiate colorbox for active item
$('#tiles li.active a').colorbox({
rel: 'lightbox', scalePhotos: true, maxWidth: '80%', maxHeight: '80%'
});
}
And this kinda works! Example, I load the page with 100 images, the colorbox gallery shows 100 images to show; i click a filter and i get 10 images visible, colorbox gives 10 images to show, i click another filter to add some more images, i get 24 images visible, colorbox refreshes it's gallery to 24. The thing is, if i click again on the same last filter to deactivate it, colorbox no longer see just 10 images but 24.

Well, actually what i posted is correct. If someone would like to use it, i'm glad to help. But i found that my issue was not the one i described.
Wookmark plugin, only adds and removes class inactive. So in wookmark's js, i was not removing class active when the item were inactive. They we're staying with both classes, and since active has no properties i wasn't seeing that. Thanks for helping (brainstorming)...

Control the Duration Of The Fade Function In MooTools 1.2

I'm using a very simple fade function with MooTools 1.2 (I 'have' to use MooTools 1.2 due to a complication over another function being called on the same page). I'm basically fading a title in on my page. Everything works great but I can't seem to find documentation on how to control the duration simply. Everything I find seems to refer to other functions and I'd like to keep this as simple as possible. Here's the javascript I've got:
window.addEvents({
load: function(){
var singleImage = $('myimage2');
singleImage.set('styles', {
'opacity': 0,
'visibility': 'visible'
});
singleImage.fade('in');
}
});
So as you see, it takes an image with id="myimage2" (which I have initially hidden with CSS) and fades in when the document is ready. It fades in quickly and I'd like it to fade in more gradually. Any ideas? Thanks.

Using the example from your previous question - http://jsfiddle.net/RNeS5/208/
// set-up an event on the browsers window
window.addEvents({
// be sure to fire the event once the document is fully loaded
load: function(){
// assing 'singleImage' variable to the image tag with the 'image' ID
var singleImage = $('image');
// set a bunch of CSS styles to the aforementioned image
singleImage.set('styles', {
'opacity': 0,
'visibility': 'visible'
});
// fade in the image
singleImage.set('tween', { duration: 2000 }).fade('in');
}
});

Flowplayer in fancybox?

I am trying to get the Flowplayer to be shown inside a Fancybox, but can't quite get it working. This is my code so far;
$("a.video_link").click(function () {
$.fancybox({
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': '/flowplayer/flowplayer.swf?video=myvideo.flv', /* have also tried a couple of other options for the url settings, but without luck)
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
Any suggestions?

Try manually launching fancybox and setting setting its content to a flowplayer.
For instance, given the link:
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
class="videoLink">Demo</a>
create a JQuery click function like this:
$('a.videoLink').click(function(e) {
e.preventDefault();
var container = $('<div/>');
container.flowplayer(
'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
$(this).attr('href')
);
$.fancybox({
content: container,
width: 300, height: 200,
scrolling: 'no',
autoDimensions: false
});
});
Note that flowplayer by default takes up size of it's container, so must be given finite dimensions to view it properly.

Have you tried to create on SWF Object with jQuery thus setting the swf params with that then using the flow players content setting to directly set the html of the model.??
Also try check your debug window too see if there is any errors showing up.
-- E.G
var flashvars = { //Change this with $.extend within click callback if you need to!
file : 'yvideo.flv'
}
var flowBoxParams = {
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'width': 680,
'height': 495,
}
var $conatiner = $('<div></div>').attr('id','MediaPlayerHolder').hide();
swfobject.embedSWF("/flowplayer/flowplayer.swf","MediaPlayerHolder","300","120","9.0.0",flashvars,params,attributes);
$("a.video_link").click(function(){
//Merge basic settings with title
params = $.extend(flowBoxParams,{title:this.title,html:$container});
//Send object to FlowPlay
$.fancybox(params);
//Show the video play
$($container).show();
});
THis is just basically setting to variables with your default settings within them (flashvars ,flowBoxParams), the creating an empty div container with the id (MediaPlayerHolder) and setting it to display:none.
Then we create a basic flash element with swfObject wich is your flowplayer swf and assign it to the hidden div container.
we then wait for the user click to be activated and then we alter the default settings to add title value to the flowplayer options.
We then tell flow player to begin what it needs to do.
with thin change the visibility of the container.
This is untested but if heres any errors they should only be minor, unless flow is strict when it comes to loading the swf will itself.

I do this alot, the only way I could get it to work was by doing simply this,
JavaScript >>
flowplayer(".player", "http://www2.imperial.ac.uk/business-school/etu/courses_1112/common/scripts/flowplayer/flowplayer-3.2.7.swf");
$('.yourbox').fancybox();
Html >>
<a class="yourbox" href="#data" >This shows content of element who has id="data"</a>
<div style="display:none">
<div id="data">
</div>
</div>
If you do it this way, you will need to put an ie hack in aswell, to unload the player, when closing the box.

Jquery Accordion tabs

How do I default the "Firstpane" set to open and the others are closed....
I copied the same code from this sample but on mine everything is open view here
Script
<script>
$(function() {
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>
<script>
// add new effect to the tabs
$.tools.tabs.addEffect("slide", function(i, done) {
// 1. upon hiding, the active pane has a ruby background color
this.getPanes().slideUp().css({backgroundColor: "#fff"});
// 2. after a pane is revealed, its background is set to its original color (transparent)
this.getPanes().eq(i).slideDown(function() {
$(this).css({backgroundColor: 'transparent'});
// the supplied callback must be called after the effect has finished its job
done.call();
});
});
</script>

Removing this fixed my problem "initialIndex: null"

or you can put initialIndex: 0 , remember the number you will use, indicate the default pane, 0 is the first element