www.webdeveloper.com
Results 1 to 5 of 5

Thread: Issue with Image Slideshow, Any ideas?

  1. #1
    Join Date
    Oct 2012
    Posts
    3

    Issue with Image Slideshow, Any ideas?

    I am working on a rotating image slideshow for the homepage of my site. The slide show functions properly but when I try to make each image linked to another page the slide show only repeats the first image over and over again. I will paste my code below please help if you can.


    <style type="text/css">
    #wrap {
    height: 400px;
    width: 950px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    overflow:hidden;
    background-image:url(scroll/home-blank.png);

    }

    #wrap img {
    display: none;
    }

    #wrap .is-showing {
    display: inline;
    }
    </style>


    <div id="wrap">
    <img src="scroll/home2.png" width="950" height="400" alt="image 1" class="is-showing" />
    <img src="scroll/home1.png" width="950" height="400" alt="image 2" />
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){
    slideShow();
    });

    function slideShow() {

    var showing = $('#wrap .is-showing');
    var next = showing.next().length ? showing.next() : showing.parent().children(':first');
    /*
    * We could have written the above statement the long way to achieve the same results
    *
    * if(showing.next().length) {
    * showing.next();
    * } else {
    * showing.parent().children(':first');
    * }
    */
    showing.fadeOut(800, function() { next.fadeIn(800).addClass('is-showing'); }).removeClass('is-showing');

    setTimeout(slideShow, 5000);
    }



    </script>





    Please let me know if you have any suggestions on how I can get each image to be linked to another page on my site.

    Thanks!

  2. #2
    Join Date
    Mar 2011
    Posts
    1,137
    Your JavaScript is written in a way that does not allow you to add elements like <a>nchor tags. It relies on there only being <img> tags. Try a different slideshow script.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Oct 2012
    Posts
    3
    Thanks, do you have one you would recommend I haven't been able to find any that are easy for me to work with.

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    2 old but good and easy JavaScriptKit slidshows are (1) /* Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)*/
    /*see forum http://www.codingforums.com/showthread.php?t=143543 for adding caption/title August08 and onMouseOver PAUSE Aug08*/ used at http://www.jacquimorgan.com and

    (2) FPMC JavaScript Slideshow (increment preload image) http://www.javascriptkit.com/script/...entslide.shtml used at http://www.josephdenaro.com
    Last edited by auntnini; 10-08-2012 at 05:35 PM. Reason: correct errors

  5. #5
    Join Date
    May 2013
    Location
    New York,United States
    Posts
    6
    Thanks very much. But the answer is right for you about Image Slideshow

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles