Member Avatar for aizel

i am new in js and i have a problem on auto click a link..after the slide show of the images i want to auto click the last image, is it possible?

this code below that i have search it redirect the link without showing the image slide show..

<script type="text/javascript">

function init(){

var linkPage = document.getElementById('dynLink').href;
window.location.href = linkPage;
}

onload=init;

</script>



<li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro2.jpg" alt="2" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
               <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro3.jpg" alt="3" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm" id="dynLink"><img src="dama_images/img_intro4.jpg" alt="4" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
  • 2 Contributors
  • 2 Replies
  • 3K Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by aizel
Member Avatar for Airshow

Aizel,

Yes it's possible but the solution is highly depenedent on what you have already coded.

Can you post the code are you using to animate the slide show please?

Airshow

Member Avatar for aizel

ok sir Airshow this is the html file

<!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>Image Slider s3Slider</title>
<!-- CSS -->
<style type="text/css" media="screen">
#slider {
    width: 813px; /* important to be same as image width */
    height: 317px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}

#sliderContent {
    width: 813px; /* important to be same as image width or wider */
    position: absolute;
    top: 0;
    margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
    display: none;
}

.sliderImage a, .sliderImage img{
border: 0;
}

.sliderImage span {
    position: absolute;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 750px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}

.sliderImage span p{
text-align:justify;
}

.clear {
    clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
    top: 0;
    left: 0;
}
.bottom {
    bottom: 0;
    left: 0;
}
.left {
    top: 0;
    left: 0;
    width: 110px !important;
    height: 280px;
}
.right {
    right: 0;
    bottom: 0;
    width: 150px !important;
    height: 300px;
}

.right p{
    width: 110px !important;
}

.bottom p{
    padding-bottom: 10px;
}

ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
      
        $('#slider').s3Slider({
            timeOut: 4000 <!-- 1000 = 1 seconds --> 
        });
    });
</script>
<script type="text/javascript">
<!--
function delayer(){
    window.location = "http://www.damario-coburg.de/"
}
//-->
</script>

</head>

<body onLoad="setTimeout('delayer()', 40000)">

    <h2>Example</h2>
    <p>This is example how to use the Slider.</p>
    
    <div id="slider">
        <ul id="sliderContent">
        
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro1.jpg" alt="1" /></a>
                <span class="bottom">
                <strong><!--add title text here -->Title Text</strong>
                <br />
                <p><!-- add context details -->Some text goes in here...</p>
                </span><!-- IMPORTANT: do not remove the <span></span> tag -->
                </li>
                
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro2.jpg" alt="2" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
               <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro3.jpg" alt="3" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro4.jpg" alt="4" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro5.jpg" alt="5" /></a>
                 <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro6.jpg" alt="6" /></a>
               <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro7.jpg" alt="7" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <div class="clear sliderImage"></div>
        </ul>
    </div>
  <!-- // slider -->

</body>
</html>

this the js script

/* ------------------------------------------------------------------------
    s3Slider
    
    Developped By: Boban Karišik -> [url]http://www.serie3.info/[/url]
        CSS Help: Mészáros Róbert -> [url]http://www.perspectived.com/[/url]
    Version: 1.0
    
    Copyright: Feel free to redistribute the script/modify it, as
               long as you leave my infos at the top.
------------------------------------------------------------------------- */


(function($){  

    $.fn.s3Slider = function(vars) {       
        
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
            
        items.each(function(i) {
    
            $(items[i]).mouseover(function() {
               mOver = true;
            });
            
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
            
        });
        
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
        
        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
        
        makeSlider();

    };  

})(jQuery);
Edited by aizel because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.