[RESOLVED] Photo Fader

[BlueLaw]

Hi.

I'm trying to design a template, with a box that fades between different photos stored within the image folder (uploads/images?

I've been using the Carl Camera Java script to do this and I've got the technology working on non CMSMS pages (ie. normal .php pages that I upload via FTP)

here is an example of it working:



I want to be able to place this kind of script within a CMSMS template so that when my client uploads new photos to her images folder, they are automatically added to this photo display.

Here is the code:

Code: Select all

{literal}<__script__ type="text/JavaScript">
<!--
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];}}
}

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>{/literal}

{literal}<__script__ type="text/javascript">
 <!--//--><![CDATA[//><!--
 
  //
  // CSS Photo Shuffler v1.0 by
  //   Carl Camera
  //   http://iamacamera.org 
  //
  // SetOpacity Function and inpiration from Photo Fade by
  //   Richard Rutter
  //   http://clagnut.com
  //
  // License: Creative Commons Attribution 2.5  License
  //   http://creativecommons.org/licenses/by/2.5/
  //

  // Customize your photo shuffle settings
  // 
  // * Surround the target < img /> with a < div >. specify id= in both
  // * The first and final photo displayed is in the html <img> tag
  // * The array contains paths to photos you want in the rotation. 
  //   If you want the first photo in the rotation, then it's best to
  //   put it as the final array image.  All photos must be same dimension
  // * The rotations variable specifies how many times to repeat array.
  //   images. zero is a valid rotation value.

  var gblPhotoShufflerDivId = "photodiv";
  var gblPhotoShufflerImgId = "photoimg"; 
  var gblImg = new Array(
<?php
	$path= "/home/bridgesa/public_html/uploads/images/catalog_src";  // change this to the path for your pictures
	$dir_handle = @opendir($path) or die("Unable to open path $path");
	$inc = 0; 
    while ($file = readdir($dir_handle)) { 
           if (strpos(strtolower($file), '.jpg') !== false){ 
           if ($inc > 0) echo ", ";
                 echo "'http://bridgesactorsagency.com/uploads/images/catalog_src/$file'";  
               $inc++; 
           } 
    } 
	closedir($dir_handle);
?> 
    );
  var gblPauseSeconds = 3;
  var gblFadeSeconds = .85;
  var gblRotations = 1;

  // End Customization section
  
  var gblDeckSize = gblImg.length;
  var gblOpacity = 100;
  var gblOnDeck = 0;
  var gblStartImg;
  var gblImageRotations = gblDeckSize * (gblRotations+1);

  window.onload = photoShufflerLaunch;
  
  function photoShufflerLaunch()
  {
  	var theimg = document.getElementById(gblPhotoShufflerImgId);
        gblStartImg = theimg.src; // save away to show as final image

	document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
	setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
  }

  function photoShufflerFade()
  {
  	var theimg = document.getElementById(gblPhotoShufflerImgId);
	
  	// determine delta based on number of fade seconds
	// the slower the fade the more increments needed
        var fadeDelta = 100 / (30 * gblFadeSeconds);

	// fade top out to reveal bottom image
	if (gblOpacity < 2*fadeDelta ) 
	{
	  gblOpacity = 100;
	  // stop the rotation if we're done
	  if (gblImageRotations < 1) return;
	  photoShufflerShuffle();
	  // pause before next fade
          setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
	}
	else
	{
	  gblOpacity -= fadeDelta;
	  setOpacity(theimg,gblOpacity);
	  setTimeout("photoShufflerFade()",30);  // 1/30th of a second
	}
  }

  function photoShufflerShuffle()
  {
	var thediv = document.getElementById(gblPhotoShufflerDivId);
	var theimg = document.getElementById(gblPhotoShufflerImgId);
	
	// copy div background-image to img.src
	theimg.src = gblImg[gblOnDeck];
	// set img opacity to 100
	setOpacity(theimg,100);

        // shuffle the deck
	gblOnDeck = ++gblOnDeck % gblDeckSize;
	// decrement rotation counter
	if (--gblImageRotations < 1)
	{
	  // insert start/final image if we're done
	  gblImg[gblOnDeck] = gblStartImg;
	}

	// slide next image underneath
	thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
  }

function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;
  
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;

  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;

  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}

//--><!]]>
</__script>{/literal}


<link href="../stylesheet/stylesheet.css" rel="stylesheet" type="text/css" />
</__body onLoad="MM_preloadImages('../about_us_f2.jpg','../contact_us_f2.jpg','../actress_profiles_f2.jpg','../actor_profiles_f2.jpg','../equity_button_f2.jpg','../spotligh_button_f2.jpg')">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <!-- fwtable fwsrc="BRIDGES FINAL.png" fwbase="bridgesfinal.jpg" fwstyle="Dreamweaver" fwdocid = "433607848" fwnested="0" -->
  <tr>
    <td><img src="../spacer.gif" width="27" height="1" border="0" alt="" /></td>
    <td><img src="../spacer.gif" width="24" height="1" border="0" alt="" /></td>
    <td><img src="../spacer.gif" width="94" height="1" border="0" alt="" /></td>
    <td><img src="../spacer.gif" width="74" height="1" border="0" alt="" /></td>
    <td><img src="../spacer.gif" width="51" height="1" border="0" alt="" /></td>
    <td><img src="../spacer.gif" width="271" height="1" border="0" alt="" /></td>
    <td><img src="../spacer.gif" width="59" height="1" border="0" alt="" /></td>
    <td><img src="../spacer.gif" width="72" height="1" border="0" alt="" /></td>
    <td><img src="../spacer.gif" width="75" height="1" border="0" alt="" /></td>
    <td><img src="../spacer.gif" width="26" height="1" border="0" alt="" /></td>
    <td><img src="../spacer.gif" width="27" height="1" border="0" alt="" /></td>
    <td><img src="../spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>
  <tr>
    <td rowspan="28" valign="top" background="../dottedframehor.jpg"><p style="margin:0px"></p></td>
    <td colspan="9" valign="top" background="../dottedframe.jpg"><p style="margin:0px"></p></td>
    <td rowspan="28" valign="top" background="../dottedframehor.jpg"><p style="margin:0px"></p></td>
    <td><img src="../spacer.gif" width="1" height="27" border="0" alt="" /></td>
  </tr>
  <tr>
    <td rowspan="26" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td rowspan="5" colspan="2"><img name="bridges_logo" src="../bridges_logo.jpg" width="168" height="113" border="0" id="bridges_logo" alt="" /></td>
    <td colspan="5" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td rowspan="26" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td><img src="../spacer.gif" width="1" height="24" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="3" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td><a href="http://www.bridgesactorsagency.com/index.php?page=about-us" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about_us','','../about_us_f2.jpg',1)"><img name="about_us" src="../about_us.jpg" width="72" height="21" border="0" id="about_us" alt="" /></a></td>
    <td><a href="http://www.bridgesactorsagency.com/index.php?page=contact-us" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact_us','','../contact_us_f2.jpg',1)"><img name="contact_us" src="../contact_us.jpg" width="75" height="21" border="0" id="contact_us" alt="" /></a></td>
    <td><img src="../spacer.gif" width="1" height="21" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="5" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td><img src="../spacer.gif" width="1" height="19" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="5"><img name="address" src="/address.jpg" width="528" height="41" border="0" id="address" alt="" /></td>
    <td><img src="../spacer.gif" width="1" height="41" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="5" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td><img src="../spacer.gif" width="1" height="8" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="7"><img name="dotbar1" src="../dotbar1.jpg" width="696" height="14" border="0" id="dotbar1" alt="" /></td>
    <td><img src="../spacer.gif" width="1" height="14" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="2" rowspan="16" align="left" valign="top"><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('actress_profiles','','../actress_profiles_f2.jpg',1)"></a><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('actor_profiles','','../actor_profiles_f2.jpg',1)"></a>      <p style="margin:0px"></p>      <p style="margin:0px"></p>      
      <table width="168" border="0" align="center" cellpadding="0" cellspacing="0">
        <!-- fwtable fwsrc="BRIDGES FINAL.png" fwbase="bridgesfinal.jpg" fwstyle="Dreamweaver" fwdocid = "433607848" fwnested="0" -->
        <tr>
          <td rowspan="2" colspan="2"><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('actress_profiles1','','../actress_profiles_f2.jpg',1)"><img name="actress_profiles1" src="../actress_profiles.jpg" width="168" height="26" border="0" id="actress_profiles1" alt="" /></a></td>
        </tr>
        <tr> </tr>
        <tr>
          <td rowspan="2" colspan="2"><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('actor_profiles1','','../actor_profiles_f2.jpg',1)"><img name="actor_profiles1" src="../actor_profiles.jpg" width="168" height="28" border="0" id="actor_profiles1" alt="" /></a></td>
        </tr>
        <tr> </tr>
        <tr>
          <td colspan="2" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
        </tr>
        <tr>
          <td rowspan="2" colspan="2"><img name="dotbar2" src="../dotbar2.jpg" width="168" height="9" border="0" id="dotbar2" alt="" /></td>
        </tr>
        <tr> </tr>
        <tr>
          <td colspan="2" valign="top" bgcolor="#ffffff"><p style="margin:0px"><img src="../spacer.gif" width="1" height="16" /></p></td>
        </tr>
        <tr>
          <td rowspan="5" colspan="2"><div id="photodiv"><img id="photoimg" src="http://www.bridgesactorsagency.com/uploads/images/catalog_src/dudley-rees_src_1.jpg?v=0" alt="Oregon Coast" /></div></td>
        </tr>
        <tr> </tr>
        <tr> </tr>
        <tr> </tr>
        <tr> </tr>
        <tr>
          <td colspan="2" valign="top" bgcolor="#ffffff"><p style="margin:0px"><img src="../spacer.gif" width="1" height="28" /></p></td>
        </tr>
        <tr>
          <td rowspan="2"><a href="http://www.equity.org.uk/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('equity_button1','','../equity_button_f2.jpg',1)"><img name="equity_button1" src="../equity_button.jpg" width="94" height="46" border="0" id="equity_button1" alt="" /></a></td>
          <td rowspan="2"><a href="http://www.spotlight.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('spotligh_button1','','../spotligh_button_f2.jpg',1)"><img name="spotligh_button1" src="../spotligh_button.jpg" width="74" height="46" border="0" id="spotligh_button1" alt="" /></a></td>
        </tr>
        <tr> </tr>
        <tr>
          <td colspan="2" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
        </tr>
      </table>
    <p style="margin:0px"></p>      <a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('equity_button','','../equity_button_f2.jpg',1)"></a><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('spotligh_button','','../spotligh_button_f2.jpg',1)"></a></td>
    <td rowspan="17" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td colspan="4" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td><img src="../spacer.gif" width="1" height="25" border="0" alt="" /></td>
  </tr>
  <tr>
    <td rowspan="2" colspan="4" valign="top" bgcolor="#ffffff"><p class="pagetitle" style="margin:0px">{title}</p></td>
    <td><img src="../spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>
  <tr>
    <td><img src="../spacer.gif" width="1" height="16" border="0" alt="" /></td>
  </tr>
  <tr>
    <td rowspan="3" colspan="4" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td><img src="../spacer.gif" width="1" height="12" border="0" alt="" /></td>
  </tr>
  <tr>
    <td><img src="../spacer.gif" width="1" height="8" border="0" alt="" /></td>
  </tr>
  <tr>
    <td><img src="../spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="4" rowspan="3" align="left" valign="top" bgcolor="#ffffff" class="bodytext"><p class="bodytext" style="margin:0px">{content}</p>
    </td>
    <td><img src="../spacer.gif" width="1" height="8" border="0" alt="" /></td>
  </tr>
  <tr>
    <td><img src="../spacer.gif" width="1" height="16" border="0" alt="" /></td>
  </tr>
  <tr>
    <td><img src="../spacer.gif" width="1" height="50" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="4" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td><img src="../spacer.gif" width="1" height="21" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="4" valign="top" bgcolor="#ffffff"><p class="pagetitle" style="margin:0px">News</p></td>
    <td><img src="../spacer.gif" width="1" height="17" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="4" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td><img src="../spacer.gif" width="1" height="21" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="4" rowspan="3" align="left" valign="top" bgcolor="#ffffff" class="newstext"><p class="newstext">{news}</p>
    </td>
    <td><img src="../spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>
  <tr>
    <td><img src="../spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>
  <tr>
    <td><img src="../spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>
  <tr>
    <td rowspan="2" colspan="4" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td><img src="../spacer.gif" width="1" height="28" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="2" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td><img src="../spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="7"><img name="dotbar3DELETE" src="../dotbar1.jpg" width="696" height="14" border="0" id="dotbar3DELETE" alt="" /></td>
    <td><img src="../spacer.gif" width="1" height="14" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="7" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td><img src="../spacer.gif" width="1" height="5" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="4" valign="top" bgcolor="#ffffff"><p style="margin:0px"></p></td>
    <td colspan="3" valign="top" bgcolor="#ffffff"><p align="right" class="newstext" style="margin:0px"><a href="http://www.bridgesactorsagency.com/index.php?page=contact-us">Contact Us</a> | Home | <a href="http://www.bridgesactorsagency.com/index.php?page=site-map">Sitemap</a> |<a href="http://www.bridgesactorsagency.com/index.php?page=about-us"> About Us</a><br />
      © {current_date format=%Y} Bridges The Actor's Agency<br />
      Design by C+R Design </p></td>
    <td><img src="../spacer.gif" width="1" height="61" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="9" valign="top" background="../dottedframehorbottom.jpg"><p style="margin:0px"></p></td>
    <td><img src="../spacer.gif" width="1" height="77" border="0" alt="" /></td>
  </tr>
</table>
<p> </p>
<p> </p>
<__body>
</__html>

Any Ideas?

[BlueLaw]

Ok so I'm attempting a new approach to this project.

To Recap:

I want an image box on my home page (built into the template) that fades up and down a series of photos contained within the uploads folder.

Ideally, when my client adds new photos via the file manager then they will be added to the photo display automatically.

I do not need the images to have links or any information on them, just fade between each other.

I was trying to do it via javascript built into the template, but it didn't work.

If I use the album module and create a new template, do you think that would be better. As you can see above I have the javascript ready to perform the operation.

Am I on the right tracks?

PS.
I have this thing working on another sire which isn't being managed by CMSMS - you can see what I mean there.

[RonnyK]

Why dont you use the image_rotater tag that is available. That will rotate the images in a given folder, using the fade in/fade out logic.

Ronny

[BlueLaw]

YES!

This is the exact type of thing I'm looking for. I'm quite new to CMSMS and at the moment I'm tending to way over complicate things.

I looked in extensions>Tags     - But I didn't see the "image_rotater" tag.

I wouldn't know how to use it yet to be honest, and I couldn't find any info on it when I searched this website. Presumably it would be something like:

{Image_rotator picFolder="uploads/images/yourfolder/"}



And then how would I apply the fading logic? Using my javascript?

Thanks so much for getting back to me, I've been trying to solve this for ages now.

Any info?

[RonnyK]

You can download this tag from the development area, http://dev.cmsmadesimple.org/projects/image-rotator/

Upload the file to the \plugins folder and it will show in the tag-list...

Ronny

[joecannes]

This does not work in Firefox...can this be modified for it to work in Firefox?