auto click link in javascript

Question

aizel 0 Newbie Poster

14 Years Ago

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>

javascript

2 Contributors
2 Replies
3K Views
19 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by aizel

Airshow 416 WiFi Lounge Lizard

14 Years Ago

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

Reply to this topic

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.

aizel 0 Newbie Poster · Answer 1 · 2010-09-13T12:17:01+00:00

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);