Help Needed On My Eagle Scout Website

[sveagle87]

1) Script Title:
Simple Controls Gallery v1.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm

3) Describe problem:
I know basic html. I do not understand javascript.

I am trying to copy the 2nd Demo on the site and apply it to my website.

Please see my Eagle Scout Pins website below:

http://eaglescoutpins.yolasite.com/blog.php

I want the text to appear on the top of the picture and have the left arrow, play button, pause button, and right arrows at the bottom of the picture.

The user will see a picture of the front of the pin.

When the user clicks on the arrow, it will show you a picture of the back of the pin.

Can someone help me with the correct coding?

I did not understand the directions given on the site.

Any help would be greatly appreciated.

Thanks,
Brian
Eagle Scout

[ddadmin]

For each pin, if all you wish to do is swap between two images (a front and back pin image), using a script that features a full set of controls (pause, play, etc) may be an overkill. A simpler script like Ultimate Fade In Slideshow might be a better choice. Simply follow the install directions on that script page, which contains the sample code for two slideshows. In your case, you would simply extend that to the number of pin slideshows you wish to show, such as 5 instead (each with two slides defined, a front and back pin image). Something like:

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

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["front.gif", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["back.gif", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"]
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})


var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["front2.gif", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["back2.gif", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"]
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler"
})

var mygallery3=new fadeSlideShow({
	wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["front3.gif", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["back3.gif", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"]
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler"
})

var mygallery4=new fadeSlideShow({
	wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["front4.gif", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["back4.gif", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"]
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler"
})

var mygallery5=new fadeSlideShow({
	wrapperid: "fadeshow5", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["front5.gif", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["back5.gif", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"]
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler"
})

</script>

<body>

<div id="fadeshow1"></div>

<br />

<div id="fadeshow2"></div>

<br />

<div id="fadeshow3"></div>

<br />

<div id="fadeshow4"></div>

<br />

<div id="fadeshow5"></div>

[sveagle87]

Hello,

Thank you for taking your time on helping me with this issue.

I agree the full set of controls (pause, play, etc) may be an overkill.

I would like the front of the pin to be the main image. When you move the mouse over the image, I want the description to appear at the top and an arrow at the bottom. When the user clicks on the arrow, you can see the back of the pin.

I am still having lots of trouble on having this work on my site.

I do not know javascript.

I just know basic html.

What part of the script goes in the head and what goes in the body?

Is there a function that is needed to go in the body?

How it is set up right now, I believe I have a script in the head tag and a function in the body tab.

Any help would greatly be appreciated!!!

Thanks,
Brian

[sveagle87]

Hello,

After thinking about this some more, I like the text on the top and have a left and right arrow at the bottom. I do not need the play / pause button.

I would like 1/2 and 2/2 where the play button would normally be.
(Between the arrows)

Just how it shows on Simple Controls Gallery v1.4.

http://www.dynamicdrive.com/dynamici...plegallery.htm

If I could just get a couple of pictures to work properly, I am sure I could figure it out from there. I just don't understand the coding.

Any help would greatly be appreciated!!!

Thanks,
Brian

[vwphillips]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#pin1 {
  position:relative;width:200px;height:150px;border:solid red 1px;
}

.caption {
  position:absolute;left:0px;top:0px;width:200px;height:150px;
}

.title {
  position:absolute;left:0px;top:0px;width:100%;height:20px;background-Color:#FFFFCC;text-Align:center;
}

.arrow {
  position:absolute;left:0px;top:130px;width:100%;height:20px;background-Color:#FFFFCC;text-Align:center;
}

/*]]>*/
</style>

<script type="text/javascript">
// Animate (24-June-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// The functional code size is 1.39K

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 2 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
  d=Math.max(d,s<0||f<0?d:0);
  this.data[0]=d;
  this.apply();
  if (ms<this.mS){
   this.to=setTimeout(function(){oop.cng(); },10);
  }
  else {
   this.data[0]=this.data[2];
   this.apply();
   if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
   if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
   else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

</script>



</head>

<body>

 <div id="pin1" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
  <div class="caption" >
   <div class="title" >Title</div>
   <div class="arrow" onmouseup="P1.fade();" >Arrow</div>
  </div>
 </div>

<script type="text/javascript">
/*<![CDATA[*/


function zxcPin(o){
 var oop=this,obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),caption=obj.getElementsByTagName('DIV')[0],ms=o.FadeDuration,opac=o.CaptionOpacity;
 obj.insertBefore(imgs[1],imgs[0]);
 this.foop=new zxcAnimate('opacity',imgs[0],0);
 this.foop.animate(0,0,10);
 this.foop.Complete=function(){
  if (this.data[0]==0){
   this.obj.style.visibility='hidden';
  }
 }
 imgs[0].style.position='absolute';
 imgs[0].style.visibility='hidden';
 imgs[0].style.zIndex='2';
 imgs[0].style.left='0px';
 imgs[0].style.top='0px';
 caption.style.zIndex='3';
 this.obj=obj;
 this.ud=true;
 this.ms=typeof(ms)=='number'?ms:1000;
 this.opac=typeof(opac)=='number'?opac:100;
 caption.style.visibility='hidden';
 this.coop=new zxcAnimate('opacity',caption,0);
 this.coop.animate(0,0,10);
 this.coop.Complete=function(){
  if (this.data[0]==0){
   this.obj.style.visibility='hidden';
  }
 }
 obj.onmouseover=function(){ oop.caption(); }
 obj.onmouseout=function(){ oop.caption(); }
}

zxcPin.prototype={

 fade:function(){
  this.foop.obj.style.visibility='visible';
  this.foop.animate(this.foop.data[0],this.ud?100:0,this.ms,[0,100]);
  this.ud=!this.ud;
 },

 caption:function(){
  var e=window.event||arguments.callee.caller.arguments[0];
  if (this.ckevt(e)){
   this.coop.obj.style.visibility='visible';
   this.coop.animate(this.coop.data[0],e.type=='mouseover'?this.opac:0,this.ms,[0,this.opac]);
  }
 },

 ckevt:function(e){
  e.cancelBubble=true;
  if (e.stopPropagation){
   e.stopPropagation();
  }
  var obj=e.target?e.target:e.srcElement;
  if (obj.nodeType==3){
   obj=obj.parentNode;
  }
  obj=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?e.toElement:e.fromElement;
  if (!obj||obj==this.obj){
   return false;
  }
  while (obj.parentNode){
   if (obj==this.obj){
    return false;
   }
   obj=obj.parentNode;
  }
  return true;
 }

}

P1=new zxcPin({
 ID:'pin1',         // the unique ID name of the parent node.        (string)
 FadeDuration:1000, //(optional) the fade duration in milli seconds. (number), default = 1000)
 CaptionOpacity:50  //(optional) the caption opacity.                (number), default = 100)
});
/*]]>*/
</script>
</body>

</html>