Jump to content
Sign in to follow this  
DamanC

"J Query Lightbox with Ultra Pics" + "Flash banners" problem

Recommended Posts

Hi guys, This looks like the place to ask :)

 

I have come to a bit of a hault with developing my site, and I hope someone out there can help :)

 

I have recently installed to my RC2a site;

 

Flash Banners v2.1 which I must say works perfectly

 

also

 

J Query Lightbox with Ultra Pics (manual install + update) again a fantastic contribution and works flawlessly.

 

 

The problem comes when both contributions come into play at the same time. The lightbox overlays the entire site but the flash banner. Its as If the site is made up of 3 layers;

 

 

TOP MOST LAYER

 

Flash banner

Lightbox

Site

 

BOTTOM MOST LAYER

 

Attached is a picture of said problem, it should explain things far more clearly than what I can.

 

Beer or cookies in the post to however can help/point me in the right direction :)

 

Thanks

 

Daman

 

3441788792_3e7df4bb7d_o.jpg

Share this post


Link to post
Share on other sites

Configure the CSS of the contributions for example the box you want to show on top has a higher z-index of the one at the bottom

 

Ie.

 

Lightbox z-index:3;

Flash banner: z-index:2;

and so on

 

you may also need to configure the flash object by adding a parameter.

 

<param name="wmode" value="transparent" />

Edited by Jonojamesmac

Share this post


Link to post
Share on other sites
Configure the CSS of the contributions for example the box you want to show on top has a higher z-index of the one at the bottom

 

Ie.

 

Lightbox z-index:3;

Flash banner: z-index:2;

and so on

 

you may also need to configure the flash object by adding a parameter.

 

<param name="wmode" value="transparent" />

 

 

Hi Jono,

 

Really appreciate you taking the time to help :)

 

I have had a look @ the CSS for the lightbox (ROOT\lightbox\prettyphoto.css), code below;

 

(Codebox removed to show colour)

/* ------------------------------------------------------------------------

This you can edit.

------------------------------------------------------------------------- */

 

div.pictureHolder .top .left { background: url(../images/prettyPhoto/tl.gif) top left no-repeat;} /* Top left corner */

div.pictureHolder .top .middle { background: #fff; } /* Top pattern/color */

div.pictureHolder .top .right { background: url(../images/prettyPhoto/tr.gif) top left no-repeat; } /* Top right corner */

 

div.pictureHolder .content a.next:hover { background: url(../images/prettyPhoto/btnNext.gif) center right no-repeat; cursor: pointer;outline:none; } /* Next button */

div.pictureHolder .content a.previous:hover { background: url(../images/prettyPhoto/btnPrevious.gif) center left no-repeat; cursor: pointer;outline:none; } /* Previous button */

div.pictureHolder .content a.close { width: 100px; height: 26px; background: url(../images/prettyPhoto/btnClose.gif) no-repeat; cursor: pointer;outline:none; } /* Close button */

 

div.pictureHolder .bottom .left { background: url(../images/prettyPhoto/bl.gif) top left no-repeat; } /* Bottom left corner */

div.pictureHolder .bottom .middle { background: #fff; } /* Bottom pattern/color */

div.pictureHolder .bottom .right { background: url(../images/prettyPhoto/br.gif) top left no-repeat; } /* Bottom right corner */

 

div.pictureHolder .loaderIcon { background: url(../images/prettyPhoto/loader.gif) top left no-repeat; } /* Loader icon */

 

/* ------------------------------------------------------------------------

DO NOT CHANGE

------------------------------------------------------------------------- */

 

div.prettyPhotoOverlay {

background: #000;

position: absolute; top: 0; left: 0;

z-index: 1;

width: 100%;

}

 

div.pictureHolder {

position: absolute; z-index: 2;

top: 50%; left: 50%;

width: 100px;

}

 

div.pictureHolder .top {

position: relative;

height: 20px;

}

* html div.pictureHolder .top { padding: 0 20px; }

 

div.pictureHolder .top .left {

position: absolute;

left: 0;

width: 20px; height: 20px;

}

div.pictureHolder .top .middle {

position: absolute;

left: 20px; right: 20px;

height: 20px;

}

* html div.pictureHolder .top .middle { position: static; }

 

div.pictureHolder .top .right {

position: absolute;

top: 0; left: auto; right: 0;

width: 20px; height: 20px;

}

 

div.pictureHolder .content {

position: relative;

background-color: #fff;

text-align: left;

width: 100%; height: 40px;

}

 

div.pictureHolder .content .details {

display: none;

margin: 15px 15px 0 20px;

}

div.pictureHolder .content .details p { float: left; clear: left; margin: 0; }

 

div.pictureHolder .content div.hoverContainer {

position: absolute; z-index: 2000;

top: 0; left: 0;

width: 100%;

}

 

div.pictureHolder .content a.next {

position: relative; z-index: 2000;

display: block; float: right;

text-indent: -10000px;

width: 49%; height: 100%;

background: url(../images/en/buttons/btnNext.gif) 10000px 50% no-repeat; /* Need to be defined that way to fix an IE bug */

outline:none;

}

 

div.pictureHolder .content a.previous {

cursor: pointer;

display: block;

text-indent: -10000px;

width: 49%; height: 100%;

background: url(../images/en/buttons/btnPrevious.gif) -10000px 50% no-repeat; /* Need to be defined that way to fix an IE bug */

outline:none;

}

 

div.pictureHolder .content a.close {

float: right;

display: block;

text-indent: -10000px;

outline:none;

}

 

div.pictureHolder .bottom {

position: relative;

height: 20px;

}

* html div.pictureHolder .bottom { padding: 0 20px; }

 

div.pictureHolder .bottom .left {

position: absolute;

left: 0;

width: 20px; height: 20px;

}

div.pictureHolder .bottom .middle {

position: absolute;

left: 20px; right: 20px;

height: 20px;

}

* html div.pictureHolder .bottom .middle { position: static; }

 

div.pictureHolder .bottom .right {

position: absolute;

top: 0; left: auto; right: 0;

width: 20px; height: 20px;

}

 

div.pictureHolder .loaderIcon {

display: none;

position: absolute;

top: 50%; left: 50%;

margin: -16px 0 0 -16px;

width: 32px; height: 32px;

}

 

div.pictureHolder #fullResImage { display: block; margin: 0 auto; }

 

 

And have edited the first two Z-index value to a higher number (998 and 999) to no avail. The last two I have left at 2000, they seem high enough!

 

I cant find any CSS relating to the banner, would it use the main stylesheet.css?

 

The flash banner contribution asks to ad two JS files: AC_ActiveX.js and AC_RunActiveContent.js and edit; catalog/includes/functions/html_output.php with:-

 

- at the end of the files ( just before the ?> )

 

 

ADD :

==========

////

// output a flash movie - by ManMachine

/*

$name is for the movie id

$movie is the flash file ie : movie.swf

if no width or height are set the movie will be displayed as big as possible ( depending on browser ) .

if no background is set , will be a trasnparent background

parameters must look like : 'param1=value1&param2=valu2' or 'param1='.$value1.'$param2=value2' ..etc..

enjoy ;)

ManMachine

 

 

 

*/

function mm_output_flash_movie($name, $movie, $width = '' , $height = '' , $background = '' , $parameters = '') {

 

if(tep_not_null($width)) {

$movie_width = 'width="'.$width.'"' ;

}

 

if(tep_not_null($height)) {

$movie_height = 'height="'.$height.'"' ;

}

 

if(tep_not_null($parameters)) {

$flash_movie = $movie . '?' . $parameters ;

} else {

$flash_movie = $movie ;

}

 

//fix ie 1 :: begins

$flash = '<script src="AC_RunActiveContent.js" type="text/javascript"></script>' . "\n" ;

$flash .= '<script type="text/javascript">AC_FL_RunContent(

\'codebase\',\'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0\',

\'width\',\' '. $width .'\',

\'height\',\' '. $height .'\',

\'quality\',\'high\',

\'pluginspage\',\'http://www.macromedia.com/go/getflashplayer\',

\'movie\',\' '. $movie .'\' );' . "\n" ;

$flash .= '</script>' . "\n" ;

 

$flash .= '<noscript><EM>' . "\n" ;

//fix ie 1 :: ends

 

$flash .= '<object type="application/x-shockwave-flash" data="'. $movie .'" '. $movie_width .' '. $movie_height.'>'."\n";

$flash .= '<param name="movie" value="'.$flash_movie.'" />' . "\n";

 

if(tep_not_null($background)) {

$flash .= '<param name="bgcolor" value="#'.$background.'" />' . "\n" ;

} else {

$flash .= '<param name="wmode" value="transparent">' . "\n" ;

}

 

$flash .= '</object>' . "\n\n" ;

 

//fix ie 2 :: begins

$flash .= '</EM></noscript><EM>' . "\n" ;

//fix ie 2 :: ends

 

return $flash;

 

return $flash;

}

 

 

The next is to edit: catalog/includes/functions/banner.php with this:-

 

Replace this

============

// Display a banner from the specified group or banner id ($identifier)

function tep_display_banner($action, $identifier) {

if ($action == 'dynamic') {

$banners_query = tep_db_query("select count(*) as count from " . TABLE_BANNERS . " where status = '1' and banners_group = '" . $identifier . "'");

$banners = tep_db_fetch_array($banners_query);

if ($banners['count'] > 0) {

$banner = tep_random_select("select banners_id, banners_title, banners_image, banners_html_text from " . TABLE_BANNERS . " where status = '1' and banners_group = '" . $identifier . "'");

} else {

return '<b>TEP ERROR! (tep_display_banner(' . $action . ', ' . $identifier . ') -> No banners with group \'' . $identifier . '\' found!</b>';

}

} elseif ($action == 'static') {

if (is_array($identifier)) {

$banner = $identifier;

} else {

$banner_query = tep_db_query("select banners_id, banners_title, banners_image, banners_html_text from " . TABLE_BANNERS . " where status = '1' and banners_id = '" . (int)$identifier . "'");

if (tep_db_num_rows($banner_query)) {

$banner = tep_db_fetch_array($banner_query);

} else {

return '<b>TEP ERROR! (tep_display_banner(' . $action . ', ' . $identifier . ') -> Banner with ID \'' . $identifier . '\' not found, or status inactive</b>';

}

}

} else {

return '<b>TEP ERROR! (tep_display_banner(' . $action . ', ' . $identifier . ') -> Unknown $action parameter value - it must be either \'dynamic\' or \'static\'</b>';

}

 

if (tep_not_null($banner['banners_html_text'])) {

$banner_string = $banner['banners_html_text'];

} else {

$banner_string = '<a href="' . tep_href_link(FILENAME_REDIRECT, 'action=banner&goto=' . $banner['banners_id']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $banner['banners_image'], $banner['banners_title']) . '</a>';

}

 

tep_update_banner_display_count($banner['banners_id']);

 

return $banner_string;

}

 

 

BY This

========

function tep_display_banner($action, $identifier) {

if ($action == 'dynamic') {

$banners_query = tep_db_query("select count(*) as count from " . TABLE_BANNERS . " where status = '1' and banners_group = '" . $identifier . "'");

$banners = tep_db_fetch_array($banners_query);

if ($banners['count'] > 0) {

$banner = tep_random_select("select banners_id, banners_title, banners_image, banners_html_text from " . TABLE_BANNERS . " where status = '1' and banners_group = '" . $identifier . "'");

} else {

return '<b>TEP ERROR! (tep_display_banner(' . $action . ', ' . $identifier . ') -> No banners with group \'' . $identifier . '\' found!</b>';

}

} elseif ($action == 'static') {

if (is_array($identifier)) {

$banner = $identifier;

} else {

$banner_query = tep_db_query("select banners_id, banners_title, banners_image, banners_html_text from " . TABLE_BANNERS . " where status = '1' and banners_id = '" . (int)$identifier . "'");

if (tep_db_num_rows($banner_query)) {

$banner = tep_db_fetch_array($banner_query);

} else {

return '<b>TEP ERROR! (tep_display_banner(' . $action . ', ' . $identifier . ') -> Banner with ID \'' . $identifier . '\' not found, or status inactive</b>';

}

}

} else {

return '<b>TEP ERROR! (tep_display_banner(' . $action . ', ' . $identifier . ') -> Unknown $action parameter value - it must be either \'dynamic\' or \'static\'</b>';

}

 

if (tep_not_null($banner['banners_html_text'])) {

$banner_string = $banner['banners_html_text'];

} else {

if ( substr($banner['banners_image'], -3, 3) == 'swf' ) {

$size = getimagesize(DIR_WS_IMAGES . $banner['banners_image']);

$banner_string = '<a href="' . tep_href_link(FILENAME_REDIRECT, 'action=banner&goto=' . $banner['banners_id']) . '" target="_blank">' . mm_output_flash_movie( $banner['banners_title'], DIR_WS_IMAGES . $banner['banners_image'] , $size[0] , $size[1]) . '</a>';

} else {

$banner_string = '<a href="' . tep_href_link(FILENAME_REDIRECT, 'action=banner&goto=' . $banner['banners_id']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $banner['banners_image'], $banner['banners_title']) . '</a>';

}

}

 

tep_update_banner_display_count($banner['banners_id']);

 

return $banner_string;

}

 

I cannot find any reference to Z-index values :(

 

The $flash .= '<param name="wmode" value="transparent">' . "\n" ; is present in the html_output.php edit. This was my first place I looked, but it looks ok? Should I be looking somewhere else?

 

Thanks in advance to anyone that can help

 

Daman

Share this post


Link to post
Share on other sites

Try and replace:

if(tep_not_null($background)) {
$flash .= '<param name="bgcolor" value="#'.$background.'" />' . "\n";
} else {
$flash .= '<param name="wmode" value="transparent">' . "\n";
}

with:

$flash .= '<param name="wmode" value="transparent">' . "\n";

Share this post


Link to post
Share on other sites
Try and replace:

if(tep_not_null($background)) {
$flash .= '<param name="bgcolor" value="#'.$background.'" />' . "\n";
} else {
$flash .= '<param name="wmode" value="transparent">' . "\n";
}

with:

$flash .= '<param name="wmode" value="transparent">' . "\n";

 

No joy :(

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×