Results 1 to 7 of 7

Thread: Advanced Gallery Script

  1. #1
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Advanced Gallery Script

    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.
    Last edited by keyboard; 11-14-2013 at 04:46 AM. Reason: Format: Removed Hyperlink

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

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

    Code:
     . . .
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much jscheuer1, works perfectly.

  4. #4
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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...

    HTML Code:
    <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?

    HTML Code:
    <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.
    Last edited by keyboard; 11-14-2013 at 04:50 AM. Reason: Format: Html Tags [html][/html]

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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
    Last edited by jscheuer1; 12-03-2013 at 04:24 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Advanced Gallery Script
    By Shell in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-12-2008, 03:52 PM
  2. Advanced Gallery script
    By swampthang in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 05-12-2006, 03:52 AM
  3. Help With Advanced Gallery Script
    By bluesteel522 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-03-2006, 02:37 PM
  4. Bug in Advanced Gallery script
    By LeeGoldsmith in forum Bug reports
    Replies: 3
    Last Post: 02-06-2006, 07:39 PM
  5. Advanced Gallery script
    By alireza in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-08-2005, 06:04 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •