Fade image javascript?

I've used the JavaScript below for many years as a way to do
a simple fading image effect on my sites. Now I've found that when
I use PVII PMM on the same page as this Javascript that the fly-out
menus in the navigation do not work.
Is there something I need to change in the code? And/or does
anyon have any suggestions (other than Flash) for doing a simple
effect of fading from one image to the next?
Here's the script I've been using for the fading images:
<script language="JavaScript1.2">
//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit
http://www.dynamicdrive.com
//This credit MUST stay intact for use
var slideshow_width='140px' //SET IMAGE WIDTH
var slideshow_height='225px' //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="photo1.jpg"
fadeimages[1]="photo2.jpg"
fadeimages[2]="photo3.jpg"
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
var ie4=document.all
var dom=document.getElementById
if (ie4||dom)
document.write('<div
style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:h idden"><div
id="canvas0"
style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left :0;filter:alpha(opacity=10);-moz-opacity:10"></div><div
id="canvas1"
style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left :0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide"
src="'+fadeimages[0]+'">')
var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1
function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) :
document.getElementById(nextcanvas)
tempobj.innerHTML='<img
src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)?
nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) :
document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)?
curimageindex+1 : 0
function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) :
document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) :
document.getElementById(curcanvas)
crossobj.innerHTML='<img
src="'+fadeimages[curimageindex]+'">'
rotateimage()
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>
<p align="center"><font face="Arial"
size="-2">Free DHTML scripts provided by<br>
<a href="
http://www.dynamicdrive.com">Dynamic
Drive</a></font></p>
-Jesse

Download the Cycle plug-in script and save it to your local site folder. I prefer to keep scripts in my Scripts folder but that's up to you.
http://jquery.malsup.com/cycle/download.html
jQuery has 3 basic parts to it:
the core code library which you ref in your <head>
the plug-in script & css (if any) which you ref in your <head>
the function code inside <script> tags -- I prefer to put this above closing </body> tag.
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script type="text/javascript" src="Scripts/jquery.cycle.all.latest.js"></script>
</head>
<body>
<div class="slideshow">
     <img src="image1.jpg" width="200" height="200" alt="description" />
     <img src="image2.jpg" width="200" height="200" alt="description" />
     <img src="image3.jpg" width="200" height="200" alt="description" />
     <img src="image4.jpg" width="200" height="200" alt="description" />
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
fx: 'fade'
</script>
</body>
That's all there is to it. If you want anything fancier, look at Cycle's More Demos & Examples near the bottom of their home page.
Nancy O.

Similar Messages

Fade Images on Rollover

i am pretty new to flash (last night at about 11:00 pm) and
need to know how to "fade" images in when. i don't know the lingo
yet so here is a site that shows what i am talking about.
http://www.timtadder.com/index3.html
rollover the images on bottom right and see how the large
images "fades" in. i have everything else (the thumbnails and large
image) from a tutorial already set up. just need to know how to add
the fade. and i do not want it as a slideshow.
thank you

for AS2 place all images on stage, make movie clips out of
them with alpha property of 0, give each one an instance name, in
this example 'pic1_mc. give your button/movie clip an instance name
of whatever, for this example 'my1_mc'. place this on an actions
layer on a frame above the pictures, or frame one if there are no
other keyframes on that layer after it.

How do you fade images in and out?

Okay I know you use alpha to fade images in and out,but how?
I want to fade oneimage in and then fade it out, then fade another
one in rightafter it. How do I do this?

hi,
first frame - alpha 100
last frame or anyother frame - alpha0
between those frames, create a motion tween.
it will fade as the movie plays. you have to implement it
according to your needs.
hope it helps,
gaurav

Fade Image acts not correct

Hi,
I've the new Fireworks CS3 and find out that Fade Image (
Commands > Creative > Fade Image) dosn't work correct
like in my old FW 8.
When I want to fade an image from left to right and select
the seccond square click OK, Fireworks will fade the image from top
to bottom. Instead of fading it from top to bottom (exact from top
to the last pixel on bottom) it fades the image about 50% over it
till the middle of the image. Except the circular fade every
command acts not accurate.
I guess that there is something wrong with my FW or the "Fade
Image.swf", because nobody seems to have same problems with it and
I have read that
somebody
in this forum has written "I took the graphic, Create / Fade Image.
Looks good."
So what could it be? Maybe CS3 hasn't updated its prefernces
or something else correctly.
I have uploaded the
SWf
file, so someone could please look inside?
Can anybody help?
Thanks in advanced.

suntrop,
Make sure you have the latest verions of FW CS3 (9.0.1.1213).
The
problem has been corrected.
alex
suntrop wrote:
> Hi,
>
> I've the new Fireworks CS3 and find out that Fade Image
Commands >
> Creative > Fade Image) dosn't work correct like
in my old FW 8.
>
> When I want to fade an image from left to right and
select the seccond square
> click OK, Fireworks will fade the image from top to
bottom. Instead of fading
> it from top to bottom (exact from top to the last pixel
on bottom) it fades the
> image about 50% over it till the middle of the image.
Except the circular fade
> every command acts not accurate.
>
> I guess that there is something wrong with my FW or the
"Fade Image.swf",
> because nobody seems to have same problems with it and I
have read that
>
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=14&catid=19
>
3&threadid=1184079&highlight_key=y&keyword1=fade%20image
in this forum has
> written "I took the graphic, Create / Fade Image. Looks
good."
>
> So what could it be? Maybe CS3 hasn't updated its
prefernces or something else
> correctly.
>
> I have uploaded the
http://mitglied.lycos.de/suntrop/www/Fade%20Image.swf,
so
> someone could please look inside?
>
> Can anybody help?
>
> Thanks in advanced.
>

Add fade to rotating image javascript

I have managed to get a tating image working with the following javascript:
<script type="text/javascript">
(function() {
    var rotator = document.getElementById('rotator');
    var imageDir = '';
    var delayInSeconds = 5;
    var images = ['h-images/homepage.jpg', 'h-images/rentalspage.jpg', 'h-images/investpage.jpg'];
    var num = 0;
    var changeImage = function() {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
    setInterval(changeImage, delayInSeconds * 1000);
</script>
the page is www.helenmarino.com/test.html (you may have to refresh the page)
I am surprised I managed to get this far so any simple code added to make the images fade nicely would be greatly appreciated.
many thanks
Helen

Download the Cycle plug-in script and save it to your local site folder. I prefer to keep scripts in my Scripts folder but that's up to you.
http://jquery.malsup.com/cycle/download.html
jQuery has 3 basic parts to it:
the core code library which you ref in your <head>
the plug-in script & css (if any) which you ref in your <head>
the function code inside <script> tags -- I prefer to put this above closing </body> tag.
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script type="text/javascript" src="Scripts/jquery.cycle.all.latest.js"></script>
</head>
<body>
<div class="slideshow">
     <img src="image1.jpg" width="200" height="200" alt="description" />
     <img src="image2.jpg" width="200" height="200" alt="description" />
     <img src="image3.jpg" width="200" height="200" alt="description" />
     <img src="image4.jpg" width="200" height="200" alt="description" />
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
fx: 'fade'
</script>
</body>
That's all there is to it. If you want anything fancier, look at Cycle's More Demos & Examples near the bottom of their home page.
Nancy O.

JavaScript Fade Images

Hey all, I'm trying to get an image to fade into another image AND also to get them to display:inline and in the center...How should I go about doing this??

OK so I thought everything was going smooth and i got everything working how i wanted BUT for some reason Firefox is the only browser where the links at the top get shifted to the right and I have no clue how to fix it for Firefox only?? every other browser besides Firefox works fine, Safari, Opera, Chrome they all work even Internet Explorer to an extent
my HTML is
        <div id="cf1">
            <p style="text-align:center"><a href="index.html"><img class="bottom" src="images/png/Reel-Over.png"><img class="top" src="images/png/Reel.png"></a></p>
        </div>
        <div id="cf2">
            <p style="text-align:center"><a href="media.html"><img class="bottom" src="images/png/Media-Over.png"><img class="top" src="images/png/Media.png"></a></p>
        </div>
        <div id="cf3">
            <p style="text-align:center"><a href="contact.html"><img class="bottom" src="images/png/Contact-Over.png"><img class="top" src="images/png/Contact.png"></a></p>
        </div>
        <div id="cf4">
            <p style="text-align:center"><a href="about.html"><img class="bottom" src="images/png/About-Over.png"><img class="top" src="images/png/About.png"></a></p>
        </div>
my CSS is
#cf1 { margin-top:-12px;
    clear:both;
    position:relative;
    float:left;
    left:0%;
    height:90px;
    width:200px;
#cf2 { margin-top:-12px;
    position:relative;
    float:left;
    left:1%;
    height:90px;
    width:200px;
#cf3 { margin-top:-12px;
    position:relative;
    float:left;
    left:6%;
    height:90px;
    width:200px;
#cf4 { margin-top:-12px;
    position:relative;
    float:left;
    left:10%;
    height:90px;
    width:200px;
#cf1 img, #cf2 img, #cf3 img, #cf4 img {
    position:absolute;
    -webkit-transition: opacity .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out;
    -o-transition: opacity .35s ease-in-out;
    -ms-transition: opacity .35s ease-in-out;
    transition: opacity .35s ease-in-out;
#cf1 a:hover img.top, #cf2 a:hover img.top, #cf3 a:hover img.top, #cf4 a:hover img.top {
    opacity:0;
Nevermind I guess I figured it out i added left:5%; right below position:absolute;
I read Firefox does not use position:absolute; accordingly with the other browsers...
Message was edited by: Keldoun

Behaviors: Appear/ Fade image

I have a series of projects in a list on the left side of my webpage. They all have behaviors to where a image will swap onClick. What would be the correct code to make the project appear from fade onClick? The website is http://archconarchitecture.com/portfolio.html. See Example: http://www.casabella-architects.com/architecture/mexican-consulate/. I would also like to the current project selected to be bolder.
Here is the code I have now..
#projectlist {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    color: #999;
    background-color: #000;
    height: 533px;
    width: 200px;
    overflow-y: scroll;
    text-align: center;
    font-weight: normal;
    cursor: pointer;
p.white:hover {
    color: #FFF;
</style>
<script type="text/javascript">
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];}}
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_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];}
</script>
</head>
<body onload="MM_preloadImages('Suzuki- New Braunfels.JPG','projects/1. Stor Blanco 2012.03.12.jpg','projects/2. Suzuki-New Braunfels 2012.03.12.jpg','projects/3. Premier DeZavala 2012.03.12.jpg','projects/4. Spring Climatized 2012.03.12.jpg','projects/5. Brake Check- Corpus Christi 2012.03.12.jpg','projects/6. World Gym -San Marcos 2012.03.12.jpg','projects/7. World Gym -New Braunfels 2012.03.12.jpg','projects/8. Premier Rittiman 2012.03.12.jpg','projects/9. 3009 Self Storage 2012.03.12.jpg','projects/10. il Sogno 2012.03.12.jpg','projects/11. A-AAAKey Colorado 2012.03.12.jpg','projects/12. A-AAAKey Annex 2012.03.12.jpg','projects/13. Sandbar 2012.03.12.jpg','projects/14. Randolph B990 2012.03.12.jpg','projects/15. Suzuki-Dallas 2012.03.12.jpg','projects/16. Brake Check- New Braunfels 2012.03.12.jpg','projects/17. Hill Country 2012.03.12.jpg','projects/18. Crestway 2012.03.12.jpg','projects/19. Eldridge Storage 2012.03.12.jpg','projects/20. Toyota Boerne 2012.03.12.jpg','projects/01. EmbarcaderoStorage2012.03.12.jpg','projects/02. StorCrestaBella2012.03.12.jpg','projects/03. BlossomStorage2012.03.12.jpg','projects/04. A-AAAKeyStorageMilitary2012.03.12.jpg','projects/05. OfficeWarehouse2012.03.12.jpg','projects/06. Loop360Storage2012.03.12.jpg','projects/07. FriscoStorage2012.03.12.jpg','projects/08. PotrancoStorage2012.03.12.jpg','projects/09. PremierCrestway2012.03.12.jpg')">
<div id="navBar"><a href="index.html">HOME</a> | <a href="about.html">ABOUT</a> | <a href="portfolio.html">PORTFOLIO</a> | <a href="references.html">REFERENCES</a> | <a href="contact.html"> CONTACT</a></div>
<div id="background">
    <div id="about">
      <h2 align="center"> </h2>
      <div id="projects">
        <table width="98%" border="0" cellpadding="0" cellspacing="5">
          <tr>
            <th width="23%" align="left" valign="top" scope="row"><div id="projectlist">
              <h3><u>PROJECTS</u></h3>
              <p class="white" onclick="MM_swapImage('main','','projects/1. Stor Blanco 2012.03.12.jpg',1)">Stor Self Storage Blanco<br /> -San Marcos, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/2. Suzuki-New Braunfels 2012.03.12.jpg',1)">Suzuki<br />
              -New Braunfels, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/3. Premier DeZavala 2012.03.12.jpg',1)">Premier Storage DeZavala<br />
              -San Antonio, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/4. Spring Climatized 2012.03.12.jpg',1)">Spring Climatized Storage<br />
              -Spring, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/5. Brake Check- Corpus Christi 2012.03.12.jpg',1)">Brake Check<br />
              -Corpus Christi, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/6. World Gym -San Marcos 2012.03.12.jpg',1)">World Gym<br />
              -San Marcos, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/7. World Gym -New Braunfels 2012.03.12.jpg',1)">World Gym<br />
              -New Braunfels, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/8. Premier Rittiman 2012.03.12.jpg',1)">Premier Storage Rittiman<br />
              -San Antonio, Texas              </p>
              <p class="white" onclick="MM_swapImage('main','','projects/9. 3009 Self Storage 2012.03.12.jpg',1)">3009 Self Storage<br />
              -Schertz, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/10. il Sogno 2012.03.12.jpg',1)">il Sogno Restaurant<br />
-San Antonio, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/11. A-AAAKey Colorado 2012.03.12.jpg',1)">A-AAAKey Storage<br />
              -Aurora, Colorado</p>
              <p class="white" onclick="MM_swapImage('main','','projects/12. A-AAAKey Annex 2012.03.12.jpg',1)">A-AAAKey Storage Annex<br />
              -San Antonio, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/13. Sandbar 2012.03.12.jpg',1)">Sandbar Restaurant<br />
              -San Antonio, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/14. Randolph B990 2012.03.12.jpg',1)">Building 990 Addition<br />
              -San Antonio, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/15. Suzuki-Dallas 2012.03.12.jpg',1)">Suzuki<br />
              -Dallas, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/16. Brake Check- New Braunfels 2012.03.12.jpg',1)">Brake Check<br />
              -New Braunfels, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/17. Hill Country 2012.03.12.jpg',1)">Hill Country Climatized Storage<br />
              -New Braunfels, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/18. Crestway 2012.03.12.jpg',1)">Crestway Storage<br />
              -San Antonio, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/19. Eldridge Storage 2012.03.12.jpg',1)">Eldridge Stoage<br />
              -Houston, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/20. Toyota Boerne 2012.03.12.jpg',1)">Toyota of Boerne<br />
-Boerne, Texas</p>
              <p>Teka Molino Restaurant<br />
              -San Antonio, Texas</p>
              <p>Palominos Mexican Grille<br /> -San Antonio ,Texas</p>
              <p>Wild West Nightclub<br /> -San Antonio, Texas</p>
              <p>Housing One Source<br /> -San Antonio, Texas</p>
              <p>Westin Fitness Center<br /> -San Antonio, Texas</p>
              <p> </p>
              <h3><u>ON THE BOARDS</u></h3>
              <p class="white" onclick="MM_swapImage('main','','projects/01. EmbarcaderoStorage2012.03.12.jpg',1)">Embarcadero Storage<br />
-Laredo, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/02. StorCrestaBella2012.03.12.jpg',1)">Stor Self Storage Cresta Bella<br />
-San Antonio, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/03. BlossomStorage2012.03.12.jpg',1)">Blossom Self Storage<br />
              -San Antonio, Texas              </p>
              <p class="white" onclick="MM_swapImage('main','','projects/04. A-AAAKeyStorageMilitary2012.03.12.jpg',1)">A-AAAKey Storage Military<br />
-San Antonio, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/05. OfficeWarehouse2012.03.12.jpg',1)">Office & Warehouse Renovation<br />
-New Braunfels, Texas</p>
              <p class="white" onclick="MM_swapImage('main','','projects/06. Loop360Storage2012.03.12.jpg',1)"> Loop 360 Climatized Storage<br />
               -Austin, Texas              </p>
              <p class="white" onclick="MM_swapImage('main','','projects/07. FriscoStorage2012.03.12.jpg',1)">Frisco Storage<br />
              -Frisco, Texas </p>
              <p class="white" onclick="MM_swapImage('main','','projects/08. PotrancoStorage2012.03.12.jpg',1)">Potranco Storage<br />
              -Bexar County, Texas              </p>
              <p class="white" onclick="MM_swapImage('main','','projects/09. PremierCrestway2012.03.12.jpg',1)">Premier Storage<br />
                -San Antonio, Texas
            </div></th>
            <td width="77%"><img src="projects/1. Stor Blanco 2012.03.12.jpg" alt="" name="main" width="671" height="518" border="8" id="main" /></td>
          </tr>
        </table>
      </div>
      <div id="ontheboards">
        <p> </p>
      </div>
    </div>
</div>
</body>
</html>
</div>

This may help you.
http://www.youtube.com/watch?v=ugmyf8-RBmI
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

A really simple cross-fade image for beginners

Hello, I would like to put a cross-fading image into a table that is my website header. I don't need anything complicated at all, no controls etc, just want 8 images that fit my cell to continuosly crossfade after 3 seconds or so. Found many scripts/plugins/jquery etc but they all seem very complicated for beginners. I've used 'easyrotator' which is so easy to use, but it doesn't seem to have a cross fade on the free mode, just a swipe and i'm sure I can find similar for free. Maybe I'm missing something but I would have thought dreamweaver (being the helpful prog that it is) would have something to do this?
Ideally, I would like it to be continuous regardless of the page people are on. I imagine this is above my head so if too tricky, perhaps it could just be random image fade.
Any advice on the best thing to use here is greatly appreciated!

Suzie8484 wrote:
Yes, it's the 'fade' option here: http://jquery.malsup.com/cycle/
There really isn't enough instructions on this website for beginners to understand exactly what and where to put the various code otherwise this would be perfect!
ok, here goes...i'll try to explain the process.
1) Insert a <div> on your page and give it the class of 'slideshow' like below.
<div class="slideshow">
</div>
2) Insert your images into the <div> as below: (example below shows images stored in 'images' folder)
<div class="slideshow">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
<img src="images/beach4.jpg" width="200" height="200" />
<img src="images/beach5.jpg" width="200" height="200" />
</div>
3) Style the 'slideshow' <div> with css. Go into code view and paste the below directly before the closing </head> tag near the top of your page.
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
4) Add the jquery scripts to your page. Go into code view and paste the below directly AFTER the css you pasted in above so this code is now directly before the closing </head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
</script>
Thats it!.
Well you would want to make sure the dimensions of the 'slideshow' <div> reflect those of your image.
So for instance if your image is 300px x 300px the dimensions should be 332px x 332px. (see below) Why the extra 32px - because this is allocated for the 15px left/right/top/bottom padding and 1 px border around the image that you see on the example page.
<style type="text/css">
.slideshow { height: 332px; width: 332px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
Also ideally you want to download the jquery cycle script rather than use the directly linked one just incase in future the script is moved.
So download the script from the link provided on the page and change this link:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
To wherever you keep the script in your site folder (below its kept in a folder named 'jquery_scripts':
<script type="text/javascript" src="jquery_scripts/jquery.min.js">

Insert Image Javascript Error

I've had this problem since I switched from MX2004 to version
8, and now on CS3. When I click on Insert Image I get a message
that in Image.htm a javascript error occured. The strange thing is
I have a second computer with CS3 installed and since re-installing
windows have not experienced this problem on that computer. I have
followed the instructions in:
Technote:
Troubleshooting JavaScript errors in Dreamweaver but this
doesn't help.
I am using Windows XP SP2 with Dreamweaver setup to connect
via RDS to my Windows Server 2003 Coldfusion web server.
If anyone has some useful insight to this very frustrating
issue that Adobe seems to have no support information on I would be
very grateful

Troubleshooting JavaScript errors in Dreamweaver
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_19105#dat
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"matstone98" <[email protected]> wrote in
message
news:fdt7os$67g$[email protected]..
> I've had this problem since I switched from MX2004 to
version 8, and now
> on
> CS3. When I click on Insert Image I get a message that
in Image.htm a
> javascript error occured. The strange thing is I have a
second computer
> with
> CS3 installed and since re-installing windows have not
experienced this
> problem
> on that computer. I have followed the instructions in:
>
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_19105&sliceId=2
> but this doesn't help.
>
> I am using Windows XP SP2 with Dreamweaver setup to
connect via RDS to my
> Windows Server 2003 Coldfusion web server.
>
> If anyone has some useful insight to this very
frustrating issue that
> Adobe
> seems to have no support information on I would be very
grateful
>

Fade image in?

Is it possible to fade an image in? The image itself is
inserted into a table cell with an Image Map over it. I need the
image to fade in so that the map that contains a link will work.
Thanks

David
I just tried this on a page I am working on and it changed
the image. The
image goes from clean and crisp, to jagged and rough.
http://www.glamgardens.com/newindex.php
What do you think caused that?
Thanks
gary
"David Powers" <[email protected]> wrote in message
news:go0q0g$c3m$[email protected]..
> "tacbob" <[email protected]> wrote in
message
> news:go0nfg$93h$[email protected]..
>> Is it possible to fade an image in?
>
> Yes. It's easy in Dreamweaver CS3 or CS4.
>
> 1. Give the image an ID.
> 2. Select the body tag in the Tag selector at the bottom
of the Document
> window.
> 3. Open the Behaviors panel (Window > Behaviors) and
click the plus
> button.
> 4. Select Effects > Appear/Fade.
> 5. In the dialog box, select the image ID as the Target
element.
> 6. Set Effect to Appear.
> 7. Adjust the Effect duration if necessary, and click
OK.
> 8. In the Behaviors panel, change the event from onClick
to onLoad.
>
> --
> David Powers
> Adobe Community Expert, Dreamweaver
>
http://foundationphp.com

Web Engine image/javascript issue

Just a note on an issue found in my gallerypage webengine with LR4 Beta.
The gallery uses javascript scrolling and I found this to be broken in the LR internal preview (using the new APE), it is all OK when exported or previewed in a browser.
(on OSX) - Console messages such as -
[HTML Trace]: ReferenceError: Can't find variable: oScroll
[HTML Trace]: doscroll at http://app-storage:52001/javascript/whscroll.js : 96
[HTML Trace]: scroll at http://app-storage:52001/javascript/whscroll.js : 90
[HTML Trace]: onmouseover at http://app-storage:52001/index.html : 192
It looked like the windows.onload functions in the js were not happening.
Tracking back from the gallerypage.html I found - background: url(../images/mailrule.gif) 0px 0px no-repeat; in CSS was causing the issue and was down to the mailrule.gif file missing from the images folder.
(was OK with LR3 but webkit in LR4 borked! and caused issues with javascript running in the webengine)
I suspect that images referenced from CSS when previewed within LR must exist in appropriate path or APE (webkit) may choke…
Also with another prototype webengine where the generated index.html uses an included html file as part of the page the same problem was happening but the image files did exist in the images folder however I think that being referenced from an included part of code causes a problem with the internal preview using APE - again everything OK with browser preview or exported galleries.
As a workround I have noticed that if the images in the included code are of the Base64 data URI embedded type then the webengine will work just fine - I used a Base64 Firefox plugin to generate the data URI's - works great!
I will maybe need to provide the embedded images on the included code when in Preview Mode only to cater for APE - just a bit of monkeying around unfortunately but glad to have the internal preview back.
Now back to my 2 year old problem of using an array list from the galleryInfo.lrweb in the albumgrid page (it broke after LR2!)

Just a note on an issue found in my gallerypage webengine with LR4 Beta.
The gallery uses javascript scrolling and I found this to be broken in the LR internal preview (using the new APE), it is all OK when exported or previewed in a browser.
(on OSX) - Console messages such as -
[HTML Trace]: ReferenceError: Can't find variable: oScroll
[HTML Trace]: doscroll at http://app-storage:52001/javascript/whscroll.js : 96
[HTML Trace]: scroll at http://app-storage:52001/javascript/whscroll.js : 90
[HTML Trace]: onmouseover at http://app-storage:52001/index.html : 192
It looked like the windows.onload functions in the js were not happening.
Tracking back from the gallerypage.html I found - background: url(../images/mailrule.gif) 0px 0px no-repeat; in CSS was causing the issue and was down to the mailrule.gif file missing from the images folder.
(was OK with LR3 but webkit in LR4 borked! and caused issues with javascript running in the webengine)
I suspect that images referenced from CSS when previewed within LR must exist in appropriate path or APE (webkit) may choke…
Also with another prototype webengine where the generated index.html uses an included html file as part of the page the same problem was happening but the image files did exist in the images folder however I think that being referenced from an included part of code causes a problem with the internal preview using APE - again everything OK with browser preview or exported galleries.
As a workround I have noticed that if the images in the included code are of the Base64 data URI embedded type then the webengine will work just fine - I used a Base64 Firefox plugin to generate the data URI's - works great!
I will maybe need to provide the embedded images on the included code when in Preview Mode only to cater for APE - just a bit of monkeying around unfortunately but glad to have the internal preview back.
Now back to my 2 year old problem of using an array list from the galleryInfo.lrweb in the albumgrid page (it broke after LR2!)

Fade image to a black background

hey guys,
im trying to fade an image to a black background. i was able to fade the image from a few tutorials but not quite how i want to. i want to the image to fade into the black background. i was able to get the image to fade but its fading into a bright white. hopefully this is a quick one for one of you out there
thank you
jon

I'm not sure if i understand exactly what You are trying to do, but if You change the "mode" from "screen" to "normal" and drag the pointer from left- to right (or remove the "reverse" and drag from the right to left) I'm sure it's about what You are trying to do.
Another way is to paint "the edges" with a large soft brush in the same color as the background.

Another random image/javascript question

So I'm trying to find the easiest way to randomly select 4 images (out of range of 8 images) and present them on a page. No motion or transitions needed - just a way that every time someone visits the page a random selection of 4 of the 8 images are shown. My current HTML looks something like this:
<div id="slider">
            <ul id="randomSlide">
            
                 <li>
                    <a href="path/to/someotherpage.html"><img alt="alt text" src="img/1.jpg"/></a>
                 </li>
          </ul>
</div>
So any suggestions on a good way to solve this problem? Any jQuery plugins? Tips?

I have not tested this on a live server, but this works perfectly locally. Put the following script immediately before the closing </body> tag on the page:
<script>
var images = [], list = document.getElementById('randomSlide'),
    elems = list.getElementsByTagName('li');
images[0] = {src: 'lasvegas1.jpg', url: 'lasvegas.html'};
images[1] = {src: 'lasvegas2.jpg', url: 'lasvegas.html'};
images[2] = {src: 'longbeach.jpg', url: 'longbeach.html'},
images[3] = {src: 'longbeach2.jpg', url: 'longbeach.html'};
images[4] = {src: 'losangeles1.jpg', url: 'losangeles.html'};
images[5] = {src: 'losangeles2.jpg', url: 'losangeles.html'};
images[6] = {src: 'sanfrancisco1.jpg', url: 'sanfrancisco.html'};
images[7] = {src: 'sanfrancisco2.jpg', url: 'sanfrancisco.html'};
images.sort(function() { return 0.5 - Math.random()});
for (var i = 0; i < 4; i++) {
    elems[i].getElementsByTagName('a')[0].href = images[i].url;
    elems[i].getElementsByTagName('img')[0].src = 'images/' + images[i].src;
</script>
Obviously, you need to change the values of src and url in each array element.
What this does is create an array of objects containing the image name and its associated url. The array is then sorted randomly, and a loop that runs four times is used to populate the "randomSlide" unordered list, replacing the href and src attributes. I have assumed the images are in a folder called "images". If not, change the value of 'images/' in the loop at the end of the script.
When I tested this locally, I used # for the default href and an empty string for src in each <img> tag. Since some people might have JavaScript disabled, it might be better to use actual values. However, this might result in the images changing after the page loads. The problem is that you can't access the unordered list until it has loaded into the DOM. The alternative would be to sort the array and preload the images, but this will slow down the display of the whole page.
A server-side solution would be much more efficient.

How to fade image to time points?

It sounds simple, but it's had me scratching my head for hours...
Does anyone know how to fade an image to certain opacities at certain points?
E.g... I want to start an image at 60% opacity, and then fade it to 25% opacity over two seconds. And then have it run at 25% opacity for another 20 seconds.
Any advice would be much appreciated.
Thanks

Thanks for the response, Mark.
But it doesn't seem possible to adjust opacity by recording. The option's greyed out. And the problem with the HUD is that it's simple to fade in and fade out. But anything more involved - like fading down from 100% - isn't possible.
But switch to keyframe editor, and anything's possible :o)

Import images JavaScript

Hi Friends,
I am new fro Javascript. I want to develop one script to import images of folder. I have one indesign document which contains image names like [[test.eps]], [test1.eps]], etc. I have one image folder which contains all the images.
I want to place these images if available in the folder otherwise show an alert and move to next iteration.
Thanks
Pooja

I too am just starting to look at javascript and have the exact same need for a script that will allow me to automate the importation of a large number of images (actually Mathtype EPSs) into an InDesign document. We have placeholders of the form <<eq01.eps>>, <<eq01.eps>>, etc. and currently have to go through the laborious task of importing each equation in one by one. With some documents containing a few hundred equations this can take up quite a bit of my time. All the Mathtype equations reside in a single folder. I know there must be a way to script this function.
I come from a long history on the mac but my current job is Windows only so Applescript isn't an option.
Any help in pointing me in the right direction would be greatly appreciated.
thanks,
Wayne

Fade image javascript?

Similar Messages

Maybe you are looking for