PDA

View Full Version : Want second version of Advanced Gallery Script on same page



defiant1950
03-08-2013, 05:31 PM
1) Script Title: Advanced Gallery Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/agallery.htm

3) First i would like to say thank you for some very flexible and "Dynamic" utilities which have saved me both money and time. I hope you continue to keep up your amazing development work.

Describe problem: I am currently running this script as a rightwrap on my webpage. I have a ddsmooth vertical menu on the left a quotation next to that and then the right wrap gallery. I have need for a new banner ad which I would like to run to the left of the current gallery between it and the quotation from confuscious introducing a number of books the client has recently published. I am looking at this gallery because it is so simple to manipulate but am unsure how I would get it to work for a second gallery and how to place it where I would like it to appear.

The page I am attempting to modify is http://www.changenyou.ca.

Any assistance is appreciated.

Doug

vwphillips
03-09-2013, 12:59 PM
I thing you just want a DIV Slide Show


<!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>
<link rel="stylesheet" type="text/css" href="https://www.changenyou.ca/style/cnu_style.css" />
<style type="text/css">
/*<![CDATA[*/
.gallery {
position:relative;width:200px;height:460px;border:solid red 1px;font-Size:12px;text-Align:center;
}
.gallerycontent {
width:200px;height:460px;
}

.gallerycontent IMG{
width:150px;height:150px;
}

.gallery2 {
position:relative;width:220px;height:180px;border:solid red 1px;font-Size:12px;text-Align:center;background-Color:#FFCC66;
}
.gallerycontent2 {
width:220px;height:460px;background-Color:#FFCC66;
}

.gallerycontent2 IMG{
width:200px;height:150px;margin-Top:10px
}

/*]]>*/
</style>

<script type="text/javascript">

var zxcDivSlideShow={

GoTo:function(id,nu){
var oop=this,o=this['zxc'+id];
if (o&&o.ary[nu]){
o.ud=nu>o.cnt?1:-1;
oop.rotate(o,nu);
}
},

Next:function(id,ud){
var oop=this,o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
oop.rotate(o,o.cnt+ud);
}
},

Auto:function(id,ms){
var oop=this,o=this['zxc'+id];
if (o){
o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
}
},

Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
}
},

init:function(o){
var id=o.ID,hold=o.AutoHoldDelay,srt=o.AutoStart;obj=document.getElementById(id);
if (obj){
var clds=obj.childNodes,ary=[],z0=0;
obj.style.overflow='hidden';
for (;z0<clds.length;z0++){
if (clds[z0].nodeName.toUpperCase()=='DIV'){
clds[z0].style.position='absolute';
clds[z0].style.zIndex=ary.length>0?'0':'1';
clds[z0].style.left='0px';
clds[z0].style.top='0px';
ary.push(clds[z0]);
}
}
zxcDivSlideShow['zxc'+id]={
id:id,
ary:ary,
lgth:ary.length-1,
hold:typeof(hold)=='number'&&hold>1000?hold:3000,
ud:1,
cnt:0
}
if (o.AddEvents!==false){
this.addevt(obj,'mouseover','Pause',id);
this.addevt(obj,'mouseout','Auto',id);
}
typeof(srt)=='number'&&srt>0&&ary[1]?this.Auto(id,srt):null;
}
},

rotate:function(o,auto){
this.Pause(o.id);
o.auto=auto===true;
var nu=o.auto?o.cnt+o.ud:auto;
nu=nu>o.lgth?0:nu<0?o.lgth:nu;
o.ary[o.cnt].style.zIndex='0';
o.ary[nu].style.zIndex='1';
o.cnt=nu;
o.auto?this.Auto(o.id,o.hold):null;
},

addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
}


}

</script>

<script type="text/javascript">

function Init(){

zxcDivSlideShow.init({
ID:'gallery1', // the unique ID name of the parent Node. (string)
AutoHoldDelay:2000, //(optional) the auto rotation 'hold' delay in milli seconds. (number, default = 3000)
AutoStart:1000 //(optional) the auto rotation 'start' delay in milli seconds. (number, default = no automatic start on initialization)
});

zxcDivSlideShow.init({
ID:'gallery2',
AddEvents:false //(optional) false = mouseover Pause and mouseout Auto will NOT be added. (boolean, default = event calls will be added)
});

zxcDivSlideShow.Auto('gallery2');

}

if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}

</script>

</head>

<body>
<div id="gallery1" class="gallery" >
<div class="gallerycontent" subject="Hypnotherapy?">
<a class="newbanner" href="https://www.changenyou.ca/hypnosis.html">
<h2>
HYPNOSIS
</h2>
<p class="bigger">
Challenge Yourself To:
</p>
<br />
<p>
Reduce Stress,
<br />
Increase Self Worth,
<br />
Balance Weight Issues,
<br />
Remove Fears and Phobias.
<br /><br />
Hypnosis Can Help!
</p>
<br />
<p class="bigger">
Make An Appointment Today!
<br /></a>
Helen: (416) 727-2513
<br />
<a href="mailto:Helen@ChangeNYou.ca">"Click to E-mail Helen." </a><br />
</p>

<h2>

</h2>



<img src="https://www.changenyou.ca/images/hypnopic.jpg" width="90%" height="90%" alt="Photo of a bridge in Algonquin park in ontarios north country"/>

</div>



<div class="gallerycontent" subject="Reiki?">
<a class="newbanner" href="https://www.changenyou.ca/reiki.html">
<h2>
REIKI SESSIONS
</h2>
<p class="bigger">
Balance Your Energetic Field
</p>
<br />
<p>
Stress Release,
<br />
Optimum Health,
<br />
Mental Wellbeing,


<br /><br />

</p>

<br />
<p class="bigger">
New Perspective on Life Challenges!
<br />
Helen: (416) 727-2513
<br /></a>
<a href="mailto:Helen@ChangeNYou.ca">"Click to E-mail Helen." </a><br />
</p>

<h2>

</h2>

<img src="https://www.changenyou.ca/images/reiki.jpg" width="90%" height="90%" alt="Photo of helen Sladden working with a reiki client"/>
</div>




<div class="gallerycontent" subject="Counselling?">
<a class="newbanner" href="https://www.changenyou.ca/counselling.html">

<h2>
COUNSELLING
</h2>
<p class="bigger">
A Different Perspective To:
</p>
<br />
<p>
Find Answers,
<br />
Resolve Issues,
<br />
Clear Blockages,
<br />
Increase Confidence,
<br /><br />
Regain Self-Respect &amp; Self-Esteem!
</p>
<br />
<p class="bigger">
Email or Call Today!
<br />
Helen: (416) 727-2513
<br /></a>
<a href="mailto:Helen@ChangeNYou.ca">"Click to E-mail Helen." </a><br />
</p>
<h2>

</h2>
<img src="https://www.changenyou.ca/images/cnulogop.jpg" width="90%" height="90%" alt="Puzzle pieces before and after"/>

</div>

<div class="gallerycontent" subject="Meditation?">
<a class="newbanner" href="https://www.changenyou.ca/meditation.html">
<h2>
MEDITATION
</h2>
<p class="bigger">
Personal Meditation Guidance
</p>
<br />
<p>
Eperience healing,
<br />
A sense of peace,
<br />
Stress release,

<br /><br />
</p>
<br />
<p class="bigger">
Join One of Our Sessions
<br />
Helen: (416) 727-2513
<br /></a>
<a href="mailto:Helen@ChangeNYou.ca">"Click to E-mail Helen." </a><br />

</p>

<h2>

</h2>

<img src="https://www.changenyou.ca/images/medpic1.jpg" width="90%" height="90%" alt="Picture of the shoreline of a lake near Tobermory, Ontario"/>
</div>
</div>


<input type="button" name="" value="GoTo 0" onmouseup="zxcDivSlideShow.GoTo('gallery2',0);" />
<input type="button" name="" value="GoTo 1" onmouseup="zxcDivSlideShow.GoTo('gallery2',1);" />
<input type="button" name="" value="GoTo 2" onmouseup="zxcDivSlideShow.GoTo('gallery2',2);" />
<input type="button" name="" value="Next" onmouseup="zxcDivSlideShow.Next('gallery2',1);" />
<input type="button" name="" value="Back" onmouseup="zxcDivSlideShow.Next('gallery2',-1);" />
<input type="button" name="" value="Auto" onmouseup="zxcDivSlideShow.Auto('gallery2');" />
<input type="button" name="" value="Pause" onmouseup="zxcDivSlideShow.Pause('gallery2');" />
<div id="gallery2" class="gallery2" >
<div class="gallerycontent2" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<br />
Egypt 1
</div>

<div class="gallerycontent2" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
<br />
Egypt 2
</div>

<div class="gallerycontent2" >
Egypt 3
<br />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
</div>

</div>
</body>

</html>