Member Avatar for davy_yg

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>
  • 4 Contributors
  • 10 Replies
  • 115 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by davy_yg

Recommended Answers

All 10 Replies

Member Avatar for floatingDivs

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.

Member Avatar for lps

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.

Member Avatar for torbatt

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

Member Avatar for davy_yg

hi,

I fix the link. Please recheck. Thanks.

Member Avatar for lps

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.

Edited by lps because: n/a
Member Avatar for lps

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.

Edited by lps because: n/a
Member Avatar for lps

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.

Edited by lps because: n/a
Member Avatar for davy_yg

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.