SHADOWBOX not loading when using swap image or rollover.

classic Classic list List threaded Threaded
26 messages Options
12
LT
Reply | Threaded
Open this post in threaded view
|

SHADOWBOX not loading when using swap image or rollover.

LT
When i load a rollover image it loads this code in the body but when i  remove the complete"onload="MM_preloadImages" the shadowbox works fine???
Any suggestions on how to fix this.  I was using LyteBox Viewer before and never had a problem but shadowbox had extra features that liked so switched/
[code]
<body bgcolor="#ffffff" onload="MM_preloadImages('images/index1_r1_c5_f4.jpg','images/index1_r1_c5.jpg','images/index1_r1_c7_f4.jpg','images/index1_r1_c7.jpg','images/index1_r1_c9_f4.jpg','images/index1_r1_c9.jpg','images/index1_r3_c12_f2.jpg','images/index1_r10_c2_f2.jpg','images/index1_r12_c15_f2.jpg')">
[/code]
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

build
LT,
I'd need to a sample on-line.

beers,
build
LT
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

LT
CRAZYLOUIE.COM
THIS IS THE CODE TO MY INDEX.HTML PAGE.  AND WERE I AM HAVING THE PROBLEM

[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Crazy Louie's Webpage...!</title>
<style type="text/css"> td img {display: block;}body { background-color: #000000; margin-left: 0px; margin-top: 0px; margin-right: 0px; } .style1 { font-size: x-small; color: #FFFFFF; } a:link { color: #FFFF00; } </style>
<script language="JavaScript1.2" type="text/javascript"> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } //--> </script><script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="src/jquery.js"></script><script type="text/javascript" src="src/adapter/shadowbox-jquery.js"></script><script type="text/javascript" src="src/shadowbox.js"></script><script type="text/javascript"> Shadowbox.loadSkin('classic', 'src/skin'); Shadowbox.loadLanguage('en', 'src/lang'); Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'src/player'); </script>
</head>
<body onload="MM_preloadImages('images/index/index_r1_c5_f4.jpg','images/index/index_r1_c5.jpg','images/index/index_r1_c7_f4.jpg','images/index/index_r1_c7.jpg','images/index/index_r1_c9_f4.jpg','images/index/index_r1_c9.jpg','images/index/index_r3_c12_f2.jpg','images/index/index_r10_c2_f2.jpg','images/index/index_r12_c15_f2.jpg');">
.......
.......
</body>
</html>
[/code]
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

build
G'day,
I'm tired but can't see where you initialise shadowBox ???

Am I missing something?

beers,
build
LT
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

</code>>

But the problem i'm having is the section on the <body> the onload= images when this is set the shadowbox doesnt work but if i take out the onload=images the shadowbox works but my rollover images dont.....???
LT
Oh my bad forgot to enter that code which is

<//a href="comment_content.html" rel="shadowbox;width=560;height=500;" onmouseout="MM_swapImgRestore();"><//img src="images/index/index_r10_c2.jpg" alt="" name="index_r10_c2" width="55" height="67" border="0" id="index_r10_c2" onClick="MM_swapImage('index_r10_c2','','images/index/index_r10_c2_f2.jpg',1)" />
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

Wizzud
In reply to this post by LT
If you are using window.onload to initialise Shadowbox, the body.onload for your image preload stuff will wipe it out!
Do not use both window.onload and body.onload! Pick one or t'other.
Combine literacy with curiosity and a whole world of information opens up to you
LT
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

LT
Well dreamweaver inputs the body.onload for the rollover effects so how would i fix this problem?
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

Wizzud
Not being a Dreamweaver user I have no idea how to go about changing its behaviour. If it won't let you add the Shadowbox.init code to the body.onload, and it won't let you move the image preloads to window.onload, then you have a big problem!
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

Celia
See this article:

http://www.javascriptkit.com/javatutors/multiplejava3.shtml

I believe that if you remove the window.onload statement and do a body onLoad instead for both, it will work.

Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

Derms
This post was updated on .
I'm using Dreamweaver as well.  See this post:  http://n2.nabble.com/Problems-in-Chrome-and-Safari-td1497289.html

Scroll to the bottom and try copying what I did.
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

eTard
here is the work around I used that seems to work perfect AND allows both SB and image preload in <body> tag of onLoad="MM_preloadImages...." to work fine together

I ended up discovering that if I put the SB code into a php include in the page, it will coexist with the body.onload so no conflict between SB needed window.onload and the image preload of body.onload

an example: I have a php include (a footer) that gets called into certain pages. rather than putting the SB code into the actual main page, I put it into this php include which then gets pulled into the main page. viola... both work perfect.

so now, I get my images to preload and get the SB to work on the same page
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

crosello
In reply to this post by Celia
excellent, thank´s a lot. Gracias!!
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

myswerveon
In reply to this post by eTard
I appreciate the response, as I am having trouble with this too.  However, I am by no means a CSS guy.  Can you please spell it out for me, with regards to the php include and footer?  Much appreciated!
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

eTard
I cant really fully spell it out as it does assume some understanding of php and php includes and the concept of an include.

basically, to get around the conflict, you have your web page A. it is a file. within that web page A you have a php include. this means that there is another file B located elsewhere that is not actually part of that web page A but the php include allows you to pull this other page B of content into your web page A. So, for example, on your web page A lets say there is a footer at the bottom that is the same content on every single page of your site. why type it out on every single page of your site. instead, you have the footer file B elsewhere and in your web page A you call that footer file B into it using a php include. then, since the footer B include loads after the rest of the page A loads, you put your SB code into the footer B. then, when the footer B is called into the web page A by the php include, viola the SB will work AND the preload images within the actual web page A will work also as the code for both is not really IN the same page A, it is just called into the same page A but lives in 2 places.

that is the best I can offer you.
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

myswerveon
Thanks!  that cleared it up for me...it's like an AutoCAD block, for those of you with a drafting knowledge.  I will look into a bit more and am really appreciative for you taking the time to explain.  I usually work with Joomla and pre-packaged CCS, so I only have experience with modifying it (colors, text sizes, etc.), not creating it.

You're the best!  Much appreciated helping out the noob.
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

myswerveon
In reply to this post by eTard


I am not getting it to work.  The shadowbox isn't working, it just links the images.  I think this is because the shadowbox is not initializing.  Is this because the php include is at the bottom of my page and theoretically loads after the image replace?

please See link:
http://greengroupstudio.com/portfolio_3d.php

the footer.php that is loaded into the above page is below:
<style type="text/css"> <!-- .style6 { font-size: x-small; color: #CCCCCC; font-family: Geneva, Arial, Helvetica, sans-serif; } --> </style><script type="text/javascript" src="src/adapter/shadowbox-base.js"></script><script type="text/javascript" src="src/shadowbox.js"></script><script type="text/javascript"> Shadowbox.loadSkin('classic', 'src/skin'); Shadowbox.loadLanguage('en', 'src/lang'); Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'src/player'); window.onload = function(){ Shadowbox.init(); </script></head>
<body>
<div align="center" class="style6">All images and content Copyright © 2009 Green Group Studio, Inc. All rights reserved.</div>
</body>
</html>
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

eTard
well.. I am not 100% sure, but in mine, I put all of this code

<script type="text/javascript"> Shadowbox.loadSkin('classic', 'src/skin'); Shadowbox.loadLanguage('en', 'src/lang'); Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'src/player'); window.onload = function(){ Shadowbox.init(); </script> 
into an external .js file shadowbox-call.js and called that along with the others like this...

<script type="text/javascript" src="src/adapter/shadowbox-base.js"></script>  <script type="text/javascript" src="src/shadowbox.js"></script><script type="text/javascript" src="src/shadowbox-call.js"></script> 
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

myswerveon
Hmmm.tried that, am I doing something wrong?

PAGE
http://greengroupstudio.com/portfolio_3dnew.html

FILE CALLED "shadowbox-call.js" IS:
<script type="text/javascript"> Shadowbox.loadSkin('classic', 'src/skin'); Shadowbox.loadLanguage('en', 'src/lang'); Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'src/player'); window.onload = function(){ Shadowbox.init(); </script>  =======================================
Also, am I the only one with IE problems and shadowbox not working?  your help is much appreciated!
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

eTard
looks to me like you put all 3 script calls back IN your actual page.. so it is conflicting with the preload call still in onLoad="MM_preloadImages('images/logos-mo.jpg')!! this is what you are trying to avoid!

put the 3 scripts into A PHP INCLUDE and not the actual page content. then call that include into the page

for example, maybe make your footer disclaimer "All images and content Copyright © 2009 Green Group Studio, Inc. All rights reserved." a php include and put your 3 script calls INTO THAT INCLUDE which is called at the end of the page load.

so, your footer.php include would be something like this....

<script type="text/javascript" src="src/adapter/shadowbox-base.js"></script><script type="text/javascript" src="src/shadowbox.js"></script><script type="text/javascript" src="src/shadowbox-call.js"></script> 
<br>
<br>
<br>
<br>
 All images and content Copyright © 2009 Green Group Studio, Inc. All rights reserved.
<br>


and then in your main page content, call in this footer.php into it
Reply | Threaded
Open this post in threaded view
|

Re: SHADOWBOX not loading when using swap image or rollover.

myswerveon
Ok, I am troubleshooting 2 things at once.  A more pressing issue at the moment is that Shadowbox works in IE7 only if I have the following at the beginning before the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

However, this messes up my image slices & formatting when viewed in Firefox. (really badly)

Regarding the initial problem, I appreciate your feedback and will try your method once I have this IE thing figured out.  Any thoughts?
12