Advanced Gallery Script

[eagleyes11]

Hello,

I have added your advanced gallery script from this page http://www.dynamicdrive.com/dynamicindex17/agallery.htm to my website to prepare for sponsor's ads, I was wondering if you could help me out please and let me know if I can make it so the images appear in a random order? So basically the "Grandstand Sports" image won't always be there when you first arrive on the page.

I don't have a 2nd image at present except for (Place your ad here) which appears after 5 seconds.

My website is here: http://www.robcherrytennis.com/

Many thanks.

[jscheuer1]

Since you're already using jQuery on the page. Just add the highlighted as shown:

 . . .
<script type='text/javascript' src='http://robcherrytennis.com/wp-content/plugins/foobar/js/jquery.foobar.2.3.min.js?ver=2.5'></script>
<script type='text/javascript' src='http://robcherrytennis.com/wp-content/uploads/2013/10/foobar-static-744.js?ver=2.5'></script>
<script type="text/javascript">
jQuery(function($){
	var items = $('.gallerycontent').toArray().sort(function(){return 0.5 - Math.random();});
	$(items).each(function(i, item){
		$('.gallerycontent').eq(i).replaceWith(item.cloneNode(true));
	});
});
</script>
<link rel="EditURI" type="application/ . . .

Worked fine here in a local mock up of the page. Sometimes one would come first, sometimes the other. I'm a little concerned that with more than two there might be problems with nodes overwriting nodes brfore they're cloned and inserted in the new random order. But that shouldn't be a problem because once you have a reference to the node, unless it's destroyed, it should still be valid. I don't think that jQuery replaceWith() destroys a node. And even with just two nodes, when reversing the order, one node would be getting overwritten before it was inserted, so that should be all the proof we need that it's not destroyed. But try it out with three or more to be sure. If there's a problem, let me know. We might not even need to clone, but that might be pushing it. Just tested that, we need to clone, otherwise the only existing copy does get overwritten when reversing.

[eagleyes11]

Thanks so much jscheuer1, works perfectly.

[eagleyes11]

Hello,

I was wondering if you could help me out, I previously had the following code below to go with the advanced gallery script on my website in which you helped me randomly rotate every 5 seconds...

<div style="font-size: small; background-color: rgba(0,0,0,.7);  border: 1px solid rgba(255,255,255,.1); text-align:center; height: 185px; width: 229px; padding-top: 10px; margin-top: 265px; margin-left: 15px;/* border: 1px solid white; */" class="gallerycontent">
<p>Sponsored by:</p>
<p align = center><a href = "https://www.facebook.com/GrandstandSportsDunLaoghaire" target =_blank><img src = "http://robcherrytennis.com/wp-content/uploads/2013/10/grandstand.jpg" height = 100 width = 87></img></a></p> <p align = center>Grandstand Sports & Leisure</p>
</div>

<div style="font-size: small; background-color: rgba(0,0,0,.7);  border: 1px solid rgba(255,255,255,.1); text-align:center; height: 185px; width: 229px; padding-top: 10px; margin-top: 265px; margin-left: 15px;/* border: 1px solid white; */" class="gallerycontent">
<p>Sponsored by:</p>
<p align = center><a href = "http://www.instacoach.com/" target =_blank><img src = "http://robcherrytennis.com/wp-content/uploads/2013/11/instacoach.png" height = 100 width = 100></img></a></p> <p align = center>Instacoach - Get coached live</p>
</div>

<div style="font-size: small; background-color: rgba(0,0,0,.7);  border: 1px solid rgba(255,255,255,.1); text-align:center; height: 185px; width: 229px; padding-top: 10px; margin-top: 265px; margin-left: 15px;/* border: 1px solid white; */" class="gallerycontent">
<p>Sponsored by:</p>
<p align = center><a href = "https://www.facebook.com/PrinceTennis?fref=ts" target =_blank><img src = "http://robcherrytennis.com/wp-content/uploads/2013/11/princelogo.png" height = 100 width = 87></img></a></p> <p align = center>Prince Tennis - Rule the court</p>
</div>

I have since then had to setup an ads manager using Simple Ads Manager plugin for Wordpress. I setup the ads just like above and tried to add in the class = "gallerycontent" into the div and the shortcode so it would rotate the ads every 5 seconds but to no avail. Can you help please?

<div style="font-size: 13px; color: #ffffff; background-color: rgba(0,0,0,.7);  border: 1px solid rgba(255,255,255,.1); text-align:center; height: 185px; width: 235px; padding-top: 10px; margin-top: 265px; margin-left: 15px; class = "gallerycontent"; ">
<p>SPONSORED BY:</P>
<?php echo do_shortcode('[sam id=3 class="gallerycontent" codes="false"]');  ?>

 </div>

Thanks.

[jscheuer1]

The key to any conversion from HTML/javascript to PHP/HTML/javascript is often to look at the served source code of the page. If the page isn't working as desired, while viewing it in the browser, use the browser's "View Source". That will show you how the PHP part is being replaced. If that doesn't fit the requirements of the script, the PHP must be changed so that it does.

[jmzfactor]

I used an advanced gallery script from your website. It was added to my school's website several years ago. I have been unable to find the problem with the script..Can anyone help? http://www.okaloosa.k12.fl.us/pryor/index.html is the web page. This is the script:
<!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="content2-Type" content2="text/html; charset=utf-8" />
<title>Pryor Middle School | Home Page</title>
<link href="pms.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActivecontent2.js" type="text/javascript"></script>
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">

/***********************************************
* Advanced Gallery script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var tickspeed=8000 //ticker speed in miliseconds (2000=2 seconds)
var displaymode="auto" //displaymode ("auto" or "manual"). No need to modify as form at the

bottom will control it, unless you wish to remove form.

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.gallerycontent2{display:none;}\n')
document.write('</style>\n')
}

var selectedDiv=0
var totalDivs=0

function getElementbyClass(classname){
partscollect=new Array()
var inc=0
var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}

function contractall(){
var inc=0
while (partscollect[inc]){
partscollect[inc].style.display="none"
inc++
}
}

function expandone(){
var selectedDivObj=partscollect[selectedDiv]
contractall()
selectedDivObj.style.display="block"
if (document.gallerycontrol)
temp.options[selectedDiv].selected=true
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
if (displaymode=="auto")
autocontrolvar=setTimeout("expandone()",tickspeed)
}

function populatemenu(){
temp=document.gallerycontrol.menu
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<totalDivs;i++){
var thesubject=partscollect[i].getAttribute("subject")
thesubject=(thesubject=="" || thesubject==null)? "HTML content2 "+(i+1) : thesubject
temp.options[i]=new Option(thesubject,"")
}
temp.options[0].selected=true
}

function manualcontrol(menuobj){
if (displaymode=="manual"){
selectedDiv=menuobj
expandone()
}
}

function preparemode(themode){
displaymode=themode
if (typeof autocontrolvar!="undefined")
clearTimeout(autocontrolvar)
if (themode=="auto"){
document.gallerycontrol.menu.disabled=true
autocontrolvar=setTimeout("expandone()",tickspeed)
}
else
document.gallerycontrol.menu.disabled=false
}


function startgallery(){
if (document.getElementById("controldiv")) //if it exists
document.getElementById("controldiv").style.display="block"
getElementbyClass("gallerycontent2")
totalDivs=partscollect.length
if (document.gallerycontrol){
populatemenu()
if (document.gallerycontrol.mode){
for (i=0; i<document.gallerycontrol.mode.length; i++){
if (document.gallerycontrol.mode[i].checked)
displaymode=document.gallerycontrol.mode[i].value
}
}
}
if (displaymode=="auto" && document.gallerycontrol)
document.gallerycontrol.menu.disabled=true
expandone()
}

if (window.addEventListener)
window.addEventListener("load", startgallery, false)
else if (window.attachEvent)
window.attachEvent("onload", startgallery)
else if (document.getElementById)
window.onload=startgallery

</script>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

//Execute the slideShow
slideShow();

});

function slideShow() {

//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});


//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});

//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});

//Get the caption of the first image from REL attribute and display it
$('#gallery .content2').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);

//Call the gallery function to run the slideshow, 10000 = change to next image

after 10 seconds
setInterval('gallery()',10000);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')?$('#gallery a.show') : $('#gallery a:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the

first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))?

$('#gallery a:first') :current.next()) : $('#gallery a:first'));

//Get next image caption
var caption = next.find('img').attr('rel');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0

}).animate({height: '1px'}, { queue:true, duration:300 });

//Animate the caption, opacity to 0.7 and height to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500

);

//Display the content2
$('#gallery .content2').html(caption);


}

</script>

On first opening the site the first image in the gallery seems to load 3 times, once with only the caption.

Thanks for any help.
John Z

[jscheuer1]

In the future, please start a new thread for a new question.

The page you link to in your post does not use the Dynamic Drive Advanced Gallery Script for the slideshow that is having the problem you describe. It uses a jQuery based gallery script for that.

So I've copied your post and moved it to the javascript area. See:

http://www.dynamicdrive.com/forums/s...jQuery-Gallery