Hash Change on Forum

JavaScript
61

Branding as in the text that appears on the player. I’m probably not following on how you change it currently the player has a black with white border, you’re saying that can be changed, using the options on this page to replace with my own graphic I create. When you download the player each PNG image is sliced up, I don’t understand ?

I’m getting confused can be break this down a bit and make references to parts of your page.

http://www.thecreativesheep.ca/construction/site_construction_a.php

On the “Main (portfolio)” menu option you have an “Illustration & 3D stills” suboption which shows a series of images. You can click on one of those images and a fancybox dialog pops up with a flowplayer control embedded.

How what are you wanting to do/see?

62

You can click on one of those images and a fancybox dialog pops up with a flowplayer control embedded.

Is is that fancybox dialog that I want to graphically change, can it be done?

63

In what way do you want to change it?

Since the flowplayer occupies the majority of the display area are you sure it is the fancybox you want to change?

64

Since the flowplayer occupies the majority of the display area are you sure it is the fancybox you want to change?

I’m leaning toward the fact that I can’t change the visual make up of fancybox, only flow player ? I want to replace that black and white graphical player, maybe no the controls it self, so much as the look of it.

65

You can do things with fancybox. It’s web pages don’t seem to be available at the moment but see the google cached version at Fancybox - Fancy lightbox alternative

This explains some of the features available.

Page seem to have come back to life Fancybox - Fancy lightbox alternative

What effect were you after?

66

I want to change the look of the player, this is a screen capture of the one on my page;

Similar to the one on the fancybox page, the visual look of the player is what I want to change. From the background, to the title to the close buttons etc.

67

The close button is given by the background style for div#fancy_close

so if you have your own image define it in your styles

div#fancy_close {
   background: url('images/myown_closebox.png') top left no-repeat;
}

the title is formatted by the style div#fancy_title div it current settings are

div#fancy_title div {
    color: #FFF;
    font: bold 12px Arial;
    padding-bottom: 1.2px;
}

The rounded box that encloses the title is down by a number of styles

td#fancy_title_left {
    height: 32px;
    width: 15px;
    background: transparent url('../images/fancy_title_left.png') repeat-x;
}

td#fancy_title_main {
    height: 32px;
    background: transparent url('../images/fancy_title_main.png') repeat-x;
}

td#fancy_title_right {
    height: 32px;
    width: 15px;
    background: transparent url('../images/fancy_title_right.png') repeat-x;
}

In addition there is an area around the flowpayer control which is style by

div#fancy_inner {
    position: relative;
    width:100%;
    height:100%;
    border: none;
    background: #000;
}
68

thanx, no reason I couldn’t find it when I searched for it.

69

I’m presently trying to find where it’s getting the 100% height and width from, I found this within within one of the JS script files for example fancy_inner:

html += '<div id="fancy_inner">';

There is no HTML file that I have on my server, where is the height and width originating from ?

70

There is a stylesheet jquery.fancybox.css which has

div#fancy_inner {
    position: relative;
    width:100%;
    height:100%;
    border: 12px;
    background: #FF83FA;
}

Presumably that is the height and width you were looking for.

The html is undoubtedly being created by the javascript routines for fancybox.

71

Philip, I checked the entire script code and creating a graphic at 100% width and height, doesn’t help. If the javascript is creating the the routines shouldn’t there be some part that tells me the width and height ? If I create a background graphic at 400x380 it won’t be proportioned correctly !

72

I believe that there are a lot of things that influence the height and width. A lot of resizing goes on based on the size of that is to be shown.

First you have a place holder image which the user clicks to get the fancybox/ flowplayer popup. That image will have a height and width. The <img> tag in the html has a height attribute and a width attribute and the image despite its actual size is squeezed into that.

When the fancybox dialog is presented its size is based on the actual size of the image. I think the fancybox and flowplayer will resize based on what is to be shown.

73

I believe that there are a lot of things that influence the height and width. A lot of resizing goes on based on the size of that is to be shown.

First you have a place holder image which the user clicks to get the fancybox/ flowplayer popup. That image will have a height and width. The <img> tag in the html has a height attribute and a width attribute and the image despite its actual size is squeezed into that.

That part I understand, like a thumbnail for the video/image. Is there any way to find out what dimensions the graphic would have to be in for it to work for the place holder image and for when it loads the place holder image ? Or is it so deep into the code, it’s next to impossible ?

74

I don’t know what your computer setup is. I will assume Windows but what browser do you use? What software do you use to create and manipulate images?

To start with your computer screen will have fixed dimension. For example 1024px by 768px is a common size and 800px by 600px is probably universally support. So think about images in relation to those sizes.

If you are using Internet Explorer then you can right-click on an image and choose the properties command from the context menu that appears. The properties dialog presented gives the “Dimension” of that image.

The image manipulation software will undoubtedly report the image size somewhere so that is also a good place to look.

75

What size does fancybox use, I want to change the border on the player if I make it a fixed dimensions it may not work perfectly, that is what I’m concerned about. What size must I make the graphic for the player, 800x600 will be too big, 320x270 may be too small. The style sheet is 100% for width and height, but it’s getting it’s dimensions from somewhere, but where in the script ? I’ve looked and can’t find this information.

76

What size does fancybox use,

I covered this in my previous post

When the fancybox dialog is presented its size is based on the actual size of the [placeholder] image.

I have inserted an image that shows the box layout of the fancy box dialog and another image which show the html that makes up the dialog. The formating of the various elements are taken from the stylesheet jquery.fancybox.css.

You can change the values in the style sheet to your chosen values.

100% - is a relative size. It is the same width as the element which contains it.

77

I didn’t look in that style sheet :frowning: Although some of the rules within the style sheet show width:100%. I know that you have explained it, I’m not understanding. For example:

    left: -13px;
height: 100%;
width: 13px;
background: transparent url('../images/fancy_shadow_w.png') repeat-y;

I know that the position is relative left -13px, the width is 13px but what is the height 100% of 75px ?

78

Please bear with me I will try to explain.

The whole dialog is a html div element, essentially a rectangular box, I haven’t referred to this div before but it has an id “fancy_outer”. This div is styled to have the height and width of the video plus the styling elements that appear around it. The height and width do not appear in the css (although other properties do) but are assigned. It is positioned absolutely.

Within fancy_outer is another div with an id “fancy_inner”. This is positioned relatively and has been given a height and width of 100% in the css file. This means that it has the same height and width as the element that it is contained within, namely “fancy_outer”. This element has a border of 12px which you have coloured pink.

Within “fancy_outer” you have two div “fancy_close” and “fancy_bg”.

“fancy_close” is positioned absolutely that is, in this case, it is positioned with values relative to “fancy_outer”. The negative values for top and left allow it to actually be positioned outside of “fancy_outer” although logically it is within.

“fancy_bg” is also positioned absolutely but essentially with its properties of top:0px, left:0px, height: 100%, width: 100% it lies on top of “fancy_outer”. It acts as a container for the _n, _ne etc divs.

Just taking one of those divs “fancy_bg_fancy_bg_w”. This is positioned absolutely is shifted left 13 pixels so it appears outsize of its container “fancy_bg” is given a width of 13px and a height of 100% (namely the same height as “fancy_bg”.

79

The explanation was well put, let me run some things by you.

div.fancy_bg_n {
    background: url("../images/fancy_shadow_n.png") repeat-x scroll 0 0 transparent;
    height: 18px;
    top: -18px;
    width: 100%;

If fancy_outer has a width of 238px and a height of 138px then the above rule is getting it’s width from fancy_outer which is 238px, correct ? Why are there rules specifically as in this one with a height and a width if they are getting there height and width from fancy_bg ?

div.fancy_bg_ne {
    background: url("../images/fancy_shadow_ne.png") no-repeat scroll 0 0 transparent;
    height: 18px;
    right: -13px;
    top: -18px;
    width: 13px;
}

There is a graphic in this rule but it seems out of place when I view it in firebug what is it’s purpose ?

80

Strictly “fancy_bg_n” is getting it width from “fancy_bg” which is getting it width from “fancy_inner” which is getting its width from “fancy_outer” where the width is explicitly defined. The only reason it is getting its width from its parent is because it has a style of width: 100%. If that was not the case then it would only be big enough to hold the content it has (which is nothing).

I’m not using firebug so I cannot see what you are seeing but the negative values for right and left will displace the element out of the normal flow.