Jump to content
dev osCommerce
Forum
  • Checkout
  • Login
  • Contact Us
  • Get in touch

osCommerce

The e-commerce.

New Demo
Our Partners

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

DamanC

By DamanC
in General Add-Ons Support

 Share

Recommended Posts

DamanC

DamanC

Posted
Posted

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

Jonojamesmac

Jonojamesmac

Posted
Posted (edited)

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
DamanC

DamanC

Posted
  • Author
Posted
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

Jonojamesmac

Jonojamesmac

Posted
Posted

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";

DamanC

DamanC

Posted
  • Author
Posted
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 :(

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...