Log in

View Full Version : two Simple galleries, one without navigation


maslerdanch
06-02-2010, 03:35 PM
Ultimate Fade-in slideshow & Simple gallery

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm

I would like to use both of them on the same page and cant get them to both work. Is there a way to do this or can I remove the navigation and titles from a second simple gallery where they are not required. I want to cycle the logo through a set of three different colours without navigation popping up on mouseover.

My page (http://colletts.co.uk/walkingholidays/?p=37)

simplegallery1 required to run with navigation.

<script type="text/javascript">

var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [750, 220], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["http://colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/walking-holidays-in-the-dolomites.jpg", "http://www.colletts.co.uk/colletts_walking_holidays.html", "_new", "Walking Holidays in the Dolomites &amp; South Tyrol"],
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/walking-holidays-in-the-pyrenees.jpg", "http://www.colletts.co.uk/pyrenees/index.html", "_new", "Walking Holidays in the Pyrenees"],
["http://colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/walking-holidays-in-the-yorkshire-dales.jpg", "http://www.eastfieldlodge.co.uk/", "_new", "Walking Breaks in the Yorkshire Dales"]
],
autoplay: [true, 8000, 1], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})

</script>


simplegallery2 required to run without navigation.

<script type="text/javascript">

var mygallery=new simpleGallery({
wrapperid: "simplegallery2", //ID of main gallery container,
dimensions: [199, 99], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/Colletts_Logo.png", "http://www.colletts.co.uk/colletts_walking_holidays.html", "_new", ""],
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/Colletts_Logo_Pyrenees.png", "http://www.colletts.co.uk/pyrenees/index.html", "_new", ""],
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/Colletts_Logo_Eastfield.png", "http://www.eastfieldlodge.co.uk/", "_new", ""]
],
autoplay: [true, 8000, 1], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})

</script>



Thanks in advance!
azoomer
06-02-2010, 09:41 PM
This works in my browsers:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="simplegallery.js">

/***********************************************
* Simple Controls Gallery- (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 simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [750, 220], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["http://colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/walking-holidays-in-the-dolomites.jpg", "http://www.colletts.co.uk/colletts_walking_holidays.html", "_new", "Walking Holidays in the Dolomites &amp; South Tyrol"],
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/walking-holidays-in-the-pyrenees.jpg", "http://www.colletts.co.uk/pyrenees/index.html", "_new", "Walking Holidays in the Pyrenees"],
["http://colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/walking-holidays-in-the-yorkshire-dales.jpg", "http://www.eastfieldlodge.co.uk/", "_new", "Walking Breaks in the Yorkshire Dales"]
],
autoplay: [true, 8000, 10], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})

</script>

<script type="text/javascript">
var mygallery=new simpleGallery({
wrapperid: "simplegallery2", //ID of main gallery container,
dimensions: [199, 99], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/Colletts_Logo.png", "http://www.colletts.co.uk/colletts_walking_holidays.html", "_new", ""],
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/Colletts_Logo_Pyrenees.png", "http://www.colletts.co.uk/pyrenees/index.html", "_new", ""],
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/Colletts_Logo_Eastfield.png", "http://www.eastfieldlodge.co.uk/", "_new", ""]
],
autoplay: [true, 6000, 10], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
</script>

<style type="text/css">
#simplegallery1{
position: relative;
visibility: hidden;
border: 0;
}
#simplegallery2{
position: relative;
visibility: hidden;
border: 0;
}
#simplegallery2 .navpanellayer{
display:none;
}
</style>
</head>
<body>
<div id="simplegallery1"></div>
<br />
<br />
<div id="simplegallery2"></div>
</body>
</html>
It is set to 10 cycles now. Adjust as needed
maslerdanch
06-03-2010, 08:06 AM
/* simple gallery */
#simplegallery2 .navpanellayer{
display:none;
}

Works perfectly - thanks - so simple!
Best
Maslerdanch
maslerdanch
06-09-2010, 07:46 AM
Hello - this works fine in firefox but in other browsers - opera, IE etc. I get a 'null' in the top left hand corner - see the image below... Any ideas?

http://colletts.co.uk/walkingholidays/

http://dl.dropbox.com/u/4845822/null.jpg
maslerdanch
06-09-2010, 07:54 AM
Ok so it was the fact I was using a png and 'Null' was showing up behind it.
A problem shared and all that!