Hi,

Can anyone help me fix the slideshow navigation ?

http://www.masterlink.co.id/slideshow3%281%29.php


First, the navigation is far too far on the left.

Second, how to erase the black bullet next to the round gray button ?

Third, I would like those gray button to be on top of the slideshow just like the 3 gray picture button on top of the slideshow.


slideshow3(1).php

<html>

<style type="text/css">

#slideshow_wrap{ width: 1700px; text-align:center; position:relative;overflow:hidden; height:400px }

#slideshow { margin: 0 0 0 -200px; height: 232px; width: 232px; margin:  auto;} 
#slideshow img { padding: 15px; border: 1px solid #ccc;  background-color: #eee; } 
#nav { position: absolute; bottom:30px; left:30px; z-index:50}
#nav li{
    float: left;
    margin-right:6px;
    width: 20px;
}

#nav a {
    display: block; 
    border: 1px solid #CCCCCC; 
    border-radius: 50%; 
    width: 12px;
    height: 12px;
    background-color: green;		
	background: url(images/buttonnav.png);
	background-position:-3px -28px; 
}

#nav li.activeSlide a {
	background-color: yellow; 
	background: url(images/buttonnav.png);
	background-position: -3px -8px; 
}

</style>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">

$(function() {

    $('#slideshow').after('<ul id="nav" />').cycle({
        pager: '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"></a></li>';
        }
    });
});

</script>

<div id="slideshow_wrap">
    
    <div id="slideshow">         
        <img src="http://localhost/ocklaw/images/banner1.png"/>        
        <img src="http://localhost/ocklaw/images/banner2.png"/>         
        <img src="http://localhost/ocklaw/images/banner3.png"/>   
    </div>
    
</div>


</html>

We can't view your website. My guess is that you are running it on a local server off your desktop and you decided to turn off the PC (or just the server).

Can you put this up on a 99.9% uptime server? Thanks.

Firstly, please have the images upload to server instead of the localhost. We can't view the images with effect.Therefore, cannot help in detail.

I think the main reason of your problem is about the CSS. My suggestion is you install firebug plugin of firefox and use it to adjust the css.

Hi,

Can anyone help me fix the slideshow navigation ?

http://www.masterlink.co.id/slideshow3%281%29.php


First, the navigation is far too far on the left.

Second, how to erase the black bullet next to the round gray button ?

Third, I would like those gray button to be on top of the slideshow just like the 3 gray picture button on top of the slideshow.


slideshow3(1).php

<html>

<style type="text/css">

#slideshow_wrap{ width: 1700px; text-align:center; position:relative;overflow:hidden; height:400px }

#slideshow { margin: 0 0 0 -200px; height: 232px; width: 232px; margin:  auto;} 
#slideshow img { padding: 15px; border: 1px solid #ccc;  background-color: #eee; } 
#nav { position: absolute; bottom:30px; left:30px; z-index:50}
#nav li{
    float: left;
    margin-right:6px;
    width: 20px;
}

#nav a {
    display: block; 
    border: 1px solid #CCCCCC; 
    border-radius: 50%; 
    width: 12px;
    height: 12px;
    background-color: green;		
	background: url(images/buttonnav.png);
	background-position:-3px -28px; 
}

#nav li.activeSlide a {
	background-color: yellow; 
	background: url(images/buttonnav.png);
	background-position: -3px -8px; 
}

</style>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">

$(function() {

    $('#slideshow').after('<ul id="nav" />').cycle({
        pager: '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"></a></li>';
        }
    });
});

</script>

<div id="slideshow_wrap">
    
    <div id="slideshow">         
        <img src="http://localhost/ocklaw/images/banner1.png"/>        
        <img src="http://localhost/ocklaw/images/banner2.png"/>         
        <img src="http://localhost/ocklaw/images/banner3.png"/>   
    </div>
    
</div>


</html>

There are no images on website
please upload images first

hi,

I fix the link. Please recheck. Thanks.

Sadly to tell you that, still, your image is in localhost which means that we cannot view your site with image as there is no images at out localhost. Please do upload the images online and change the code to link to corresponding images. Else, we can do nothing to help.

Finally, I can see the images.
First of all, to remove the bullet, add
#nav {list-style: none;}
The problem with your slide arrangement is cause by your auto margin of #slideshow joined by the over-wide #slideshow_wrap.
Sorry to tell you that I don't quite understand your third problem.

Ok, I finally get the idea on your third question. If I am not mistaken, You are trying to develop a content slider where the right hand side of the slider is a content div is it? If so, I don't see any problem to append the #nav into the content div, by using jquery.

I don't understand, what do you mean by: append the #nav into the content div, by using jquery ?

Basically you can three bullets on the slideshow, my navigation bullets suppose to be on top of those.

How there are big distance between the navigation and the slideshow.

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.