Page 2 of 2 FirstFirst 12
Results 11 to 13 of 13

Thread: Revolver.js Not working in Firefox or IE

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,191 Times in 3,155 Posts
    Blog Entries
    12

    Default

    I was wrong about the class. It's used, but not for hiding and revealing the images, rather I believe it's only used for the initial setup of the slider feature, which one is initially seen, and the rest hidden.

    Anyways, this appears to do what you want it to do:

    Code:
    	if($("#test1").css('display') !== 'none') {
    	document.getElementById("my_slider").innerHTML='<a href="#"><img id="after1" src="images/riverwalk.jpg"/></a>';
    	}
            else if($("#test2").css('display') !== 'none'){
    	document.getElementById("my_slider").innerHTML='<a href="#"><img id="after2" src="images/cropped-potluck-yarn-logo1.png"/></a>';
    	}
    And in a sort of belated answer to your other question, how to restart the slider without refreshing the page, after backing up what you have, replace your script with this one:

    Code:
    <script type="text/javascript">
    var revolver = $('#my_slider').revolver({autoPlay:false, rotationSpeed:40000, transition: {type: 'slide', speed:500}}).data('revolver');
    $(document).keydown(function(e)
    {
        /*right*/
        if (e.keyCode === 39)
        {
            revolver.next();
        }
    
       /*left*/
        else if (e.keyCode === 37)
        {
            revolver.previous({direction:'right'});
        }
    
        /*up*/
        else if (e.keyCode === 38)
        {
    		
    	if($("#test1").css('display') !== 'none') {
    	$('#my_slider').append('<a class="slidercover" style="position:absolute;top:0;left:0;" href="#"><img id="after1" src="images/riverwalk.jpg"/></a>');
    	}
            else if($("#test2").css('display') !== 'none'){
    	$('#my_slider').append('<a class="slidercover" style="position:absolute;top:0;left:0;display:block;width:100%;height:100%;background-color:#f3edf5;" href="#"><img id="after2" src="images/cropped-potluck-yarn-logo1.png"/></a>');
    	}
        }
    
        /*down*/
        else if (e.keyCode === 40)
        {
    		e.preventDefault();
    		revolver.first({speed: 0});
    		$('.slidercover').remove();
        }
    });
    </script>
    And this part of the new code:

    Code:
        else if (e.keyCode === 38)
        {
    		
    	if($("#test1").css('display') !== 'none') {
    	$('#my_slider').append('<a class="slidercover" style="position:absolute;top:0;left:0;" href="#"><img id="after1" src="images/riverwalk.jpg"/></a>');
    	}
            else if($("#test2").css('display') !== 'none'){
    	$('#my_slider').append('<a class="slidercover" style="position:absolute;top:0;left:0;display:block;width:100%;height:100%;background-color:#f3edf5;" href="#"><img id="after2" src="images/cropped-potluck-yarn-logo1.png"/></a>');
    	}
        }
    can be written using the revolver object:

    Code:
        else if (e.keyCode === 38)
        {		
    	if(revolver.currentSlide === 0) {
    	revolver.container.append('<a class="slidercover" style="position:absolute;top:0;left:0;" href="#"><img id="after1" src="images/riverwalk.jpg"/></a>');
    	}
            else if(revolver.currentSlide === 1){
    	revolver.container.append('<a class="slidercover" style="position:absolute;top:0;left:0;display:block;width:100%;height:100%;background-color:#f3edf5;" href="#"><img id="after2" src="images/cropped-potluck-yarn-logo1.png"/></a>');
    	}
        }
    Last edited by jscheuer1; 06-15-2013 at 01:02 PM. Reason: add belated answer
    - John
    ________________________

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

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,191 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Here's an even more robust way to do it (markup and on page script have changed):

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>slider tour</title>
    <script src="/tour/lightbox/js/jquery-1.7.2.min.js"></script>
    <script src="/tour/lightbox/js/lightbox.js"></script>
    
    <link rel="stylesheet" type="text/css" href="slidertour.css"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <link href="/tour/lightbox/css/lightbox.css" rel="stylesheet" />
    </head>
    <body>
    <div class="fullwrapper">
    <div class="tourheaderimg">
    <img src="images/cropped-potluck-yarn-logo1.png" alt="Potluck Logo">
    </div>
    <br clear="both" />
    <div class="tourwrapper">
    
    <div class="sliderwrappertour">
    <div id="my_slider">
    
        <a href="images/potluckbg.jpg" rel="lightbox" title="my caption"><img class="slide" src="http://revolverjs.com/assets/img/1.png" alt="" /></a>
        <img class="slide hidden" src="http://revolverjs.com/assets/img/2.png" alt="" />
        <img class="slide hidden" src="http://revolverjs.com/assets/img/3.png" alt="" />
        <img class="slide hidden" src="http://revolverjs.com/assets/img/4.png" alt="" />
        <img class="slide hidden" src="http://revolverjs.com/assets/img/5.png" alt="" />
        <img class="slide hidden" src="http://revolverjs.com/assets/img/6.png" alt="" />
        <a href="#"><img class="slide hidden menu" src="images/riverwalk.jpg" alt="" /></a>
        <a style="width:720px;height:300px;display:block;background:#f3edf5;" href="#"><img class="slide hidden menu" src="images/cropped-potluck-yarn-logo1.png" alt="" /></a>
    </div>
    
    </div><!-- end sliderwrappertour -->
    <div class="tournavtips">
    <h3 class="tourheader3">Instructions</h3>
    <p class="tourtxt">Take a visual tour of the lands in The Broken Circle</p>
    <ul class="tourtxtlist"><li>The <b>left arrow</b> moves your screen to the left.</li> 
    <li>The <b>right arrow</b> moves your screen to the right.</li>
    <li>The <b>up arrow</b> toggles the menu of the different tours that are available.</li>
    <li>The <b>down arrow</b> restarts the tour.</li>
    </ul>
    </div><div class="tourmenu"><a href="http://potluckyarn.com"><img src="images/return.png" alt="Return to the homepage"></a></div></div><!-- end wrapper--> 
    </div><!--endfullwrapper-->
    
    <script type="text/javascript" src="http://www.potluckyarn.com/tour/js/jquery-1.10.1.min.js" ></script>
    <script type="text/javascript" src="http://www.potluckyarn.com/tour/js/jquery.revolver.min.js" ></script>
    
    
    
    <script type="text/javascript">
    var revolver = $('#my_slider').revolver({autoPlay:false, rotationSpeed:40000, transition: {type: 'slide', speed:500}}).data('revolver');
    revolver.menulimit = revolver.numSlides - revolver.slides.filter('.menu').length;
    $(document).keydown(function(e)
    {
        /*right*/
        if (e.keyCode === 39 && !revolver.override)
        {
        	revolver.nextSlide < revolver.menulimit? revolver.next() : revolver.first();
        }
    
       /*left*/
        else if (e.keyCode === 37 && !revolver.override)
        {
            revolver.currentSlide > 0? revolver.previous({direction:'right'}) : revolver.goTo(revolver.menulimit - 1, {direction:'right'});
        }
    
        /*up*/
        else if (e.keyCode === 38 && !revolver.override)
        {		
    	if(revolver.currentSlide + revolver.menulimit < revolver.numSlides) {
    		revolver.goTo(revolver.currentSlide + revolver.menulimit, {direction:'up'});
    		revolver.override = true;
    	}
        }
    
        /*down*/
        else if (e.keyCode === 40)
        {
    	revolver.first({direction: 'down'});
    	revolver.override = false;
        }
        e.preventDefault();
    });
    </script>
    
    </body>
    </html>
    - John
    ________________________

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

  3. #13
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    Wow. I tried the above code (the one above your last post). It works very well. I will try implementing your last post. Thank you very much for your help.

Similar Threads

  1. Image revolver
    By gemzilla in forum JavaScript
    Replies: 1
    Last Post: 09-11-2012, 02:20 PM
  2. Replies: 4
    Last Post: 10-24-2009, 07:07 AM
  3. javascript code not working in ie but working in firefox
    By sukanya.paul in forum JavaScript
    Replies: 2
    Last Post: 02-20-2009, 12:44 PM
  4. Replies: 1
    Last Post: 08-21-2008, 02:32 PM
  5. Script working/not working in Firefox
    By SawnDiddle in forum JavaScript
    Replies: 2
    Last Post: 03-27-2008, 07:23 AM

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
  •