Results 1 to 4 of 4

Thread: Featured Content Slider: slider on top of slideshow

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    807
    Thanks
    87
    Thanked 2 Times in 2 Posts

    Default Featured Content Slider: slider on top of slideshow

    1) Script Title: Featured Content Slider

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

    3) Describe problem: Is it possible to have the slider on top of the slideshow, but a transparant backround ?

    I tried the folowing in the css, but it doesn't work, as the slider appears behind the slideshow.

    Code:
    .pagination{
    width: 630px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
    text-align: right;
    background:url(transparent.png) repeat-x;
    margin-top: -50px;
    padding: 5px 10px;
    border-left: 1px solid #fff;
    }

  2. #2
    Join Date
    Aug 2004
    Posts
    9,902
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Try something like the following to get the pagination DIV to overlay the main slider DIV:

    Code:
    <style type="text/css">
    
    #paginate-slider1{
    position:relative;
    top: 35px;
    opacity:0.6;
    -moz-opacity:0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)";
    z-index:100;
    }
    
    </style>
    Sample HTML for slider:

    Code:
    <div id="paginate-slider1" class="pagination">
    
    </div>
    
    <div id="slider1" class="sliderwrapper">
    
    <div class="contentdiv">
    Content 1 Here. <br />
    <p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
    </div>
    
    <div class="contentdiv">
    Content 2 Here.
    </div>
    
    <div class="contentdiv">
    Content 3 Here.
    </div>
    
    </div>
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    chechu (07-18-2009)

  4. #3
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    807
    Thanks
    87
    Thanked 2 Times in 2 Posts

    Default

    There appears a gap above the slideshow, just as high as the pagination bar (look here: safarisinafrika.be)

    Update: I think I solved it by placing
    Code:
    .sliderwrapper{
    position: relative; /*leave as is*/
    overflow: hidden; /*leave as is*/
    border: 0px;
    width: 660px; /*width of featured content slider*/
    height: 300px;
    margin-top:-28px;
    }
    To go a step further: is it possible to place a different text link on top of each image, with a transparant background ?
    Last edited by chechu; 07-18-2009 at 09:14 PM. Reason: adjusted

  5. #4
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    807
    Thanks
    87
    Thanked 2 Times in 2 Posts

    Default

    My idea is to get something like a slideshow, but have text links horizontal with a transparant background and the amount of images below.

    This is the coding, thanks to gabfirethemes.com:

    Add this to the contentslider.css:
    Code:
    h2.featuredTitle { 
    	font-family: "Trebuchet MS",Arial; clear:both;
    	display:block;
    	background:url(../images/transparent.png);
    }
    h2.featuredTitle a {
    	font-size:15px;
    	display:block;
    	color:#fff;
    	font-weight: bold;
    	padding:6px 5px 15px 10px;
    	text-decoration:none;
    }
    h2.featuredTitle a:hover {
    	text-decoration:underline;
    }
    and changing this in the content, where the image of the slideshow is placed as background
    Code:
    <div class="contentdiv" style="background:url(images/images1.jpg)">
    <h2 class="featuredTitle"><a href="index.php">welcome to this site </a></h2>
    </div>
    Last edited by chechu; 07-26-2009 at 08:41 PM. Reason: solution

Bookmarks

Posting Permissions

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