Learn VBA & Macros in 1 Week!

JavaScript - Slider Problem (simple Javascript Fix For An Expert)

Full Excel VBA Course - Beginner to Expert

Slider Problem (simple Javascript Fix For An Expert)	View Content

Hi, i would like to explain my situation, basically, i am trying to create a slider with thumbnails. The slider is complete, works very well. The only problem is that the captions are just not appearing properly.

I had a situation where the captions did work but they had to be coming in from the slideOut functions but what i want is for it to be displayed when the person hovers over the image.

This is what it looks like at the moment...

This is when the caption is coming from the top.

i would like to implement
Code:

http://web.enavu.com/demos/caption/

or this
Code:

http://www.sohtanaka.com/web-design/examples/image-hover/

Doesnt matter which one

into my slider when an image is hovered over (not the thumbnail) the actual image, then the caption covers the whole image displaying whatever text...

Coding:
(HTML)
Code:

                    <div class="main_view">
                        <div class="window">    
                            <div class="image_reel">
                    			<a href="#">
                                    <img style="height:534px;" src="http://i55.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(253); ?>">
                                    <img src="http://i51.tinypic.com/.jpg" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(256); ?>">
                                    <img src="http://i52.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(258); ?>">
                                    <img src="http://i53.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(271); ?>">
                                    <img src="http://i53.tinypic.com/.png" alt="" />
                                </a>
                            </div>
		<div class="descriptions">
			<!--welcome page-->
				<div class="desc">
					<strong style="font-size:30px;">Welcome to City Water</strong>
						<div class="clear"></div><br/>
                            <div id="sliderdescription">WHATEVER WHATEVER</div>

				</div>
                
			<!--Services page-->
			<div class="desc">
			<?php $post_id = 253; $queried_post = get_post($post_id); ?>
       <strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong>
                        <div class="clear"></div><br/>
                            <div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
                </div>
                    <div class="desc">
                                        <!--Products page-->
<?php $post_id = 256; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>


                    </div>
                    <div class="desc">
                                                 <!--Information page-->
<?php $post_id = 258; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>


                    </div>
                    <div class="desc">
                                                 <!--Accounts page-->
<?php $post_id = 271; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
                    </div>
                </div>
            </div>
            
<div id="hrline"></div>

 <div class="paging">
         <ul class="thumb">
<li><a href="#" rel="1"><img src="http://i55.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="2"><img src="http://i56.tinypic.com/.jpg" class="thumbnails"/></a></li>
<li><a href="#" rel="3"><img src="http://i51.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="4"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="5"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
        </ul>
    </div>
 </div>

CSS
Code:

 /*--Main Container--*/
 .main_view {
  float : left;
  height :488px;
  margin-bottom :1px;
  margin-top :-40px;
  position :relative;
}

 /*--Window/Masking Styles--*/
 .window img{
  height :492px;
  width : 974px;
}

 .window {
  /*--Hides anything outside of the set width/height--*/
  border :3px solid #D7D7D5;
  color : #B4B4B4;
  font-size : 12px;
  font-weight : bold;
  height :488px;
  overflow : hidden;
  position : relative;
  width : 974px;
}

 .image_reel {
  left : 0;
  position : absolute;
  top : 0;
}

 .image_reel img {
  float : left;
}

 .image_reel ul li {
  display : inline;
}

  #image_reel .caption {
  background-color :#000;
  bottom :0;
  color :#ffffff;
  height :100px;
  position :absolute;
  width :100%;
  z-index :600;
}

    #image_reel .caption .content {
}

    #image_reel .caption .content h3 {
  color :#1DCCEF;
  margin :0;
  padding :0;
}

 /*--Paging Styles--*/
 .paging {
  /*--Assures the paging stays on the top layer--*/
  /*--Hidden by default, will be later shown with jQuery--*/
  bottom : -25px;
  display : none;
  line-height : 40px;
  position : absolute;
  right : -70px;
  text-align : center;
  z-index : 100;
}



.desc {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
	margin-top:275px;
    color: white;
    font-size: 2em;
    padding: 7px;

}

JAVASCRIPT
Code:

$(document).ready(function() {

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");
        
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
    
    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});
    
    //Paging + Slider Function
    rotate = function(){    
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        hideComment();
        
        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
        
        //Slider Animation
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 500 );
       
        showComment();
    };
    
    //Rotation + Timing Event
    rotateSwitch = function(){        
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
            $active = $('.paging a.active').next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 7000); //Timer speed in milliseconds (3 seconds)
    };
    
    rotateSwitch(); //Run function on launch
    
    //On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
        play = null;
    }, function() {
        rotateSwitch(); //Resume rotation
    });    
    
    showComment = function(){
        // slide toggle effect set to slow you can set it to fast too.
        $(".desc").eq( $('.paging a.active').attr("rel") - 1 ).show(700);
        return true;
    };
    
    showComment(); // Show Comment initially
    
     hideComment = function(){
        $(".desc").stop(true,true).slideUp(500).hide();
     };
    
    //hide comment if you click on it
    $(".desc").click(function(){
        hideComment();
    });
    
    //On Click
    $(".paging a").click(function() {    
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });    
    
});

Full Excel VBA Course - Beginner to Expert

Javascript Slider Problem

Similar Tutorials

JavaScript - Slider Problem (simple Javascript Fix For An Expert)

Slider Problem (simple Javascript Fix For An Expert)

Similar Tutorials

Javascript Slider Problem

Passing Array Variable-should Be Simple For An Expert

Is Anyone An Expert At Javascript?

Looking For Facebook And Javascript Expert

Looking For Simple Ie6 Image Slider/rotator

Jquery Slider - Simple Code Issue?

Simple Javascript Problem

Simple Javascript Problem That I Need Help Please

Simple Javascript Pop Up Window Problem

Simple Javascript Toggle Problem

Simple Javascript Calculation Problem

Simple Javascript Problem Calling A Function

Slider In Javascript

Simple Problem: Javascript Wont Write Out A Css Span Class

Coda Slider Javascript -- Need Help

Javascript Gallery Slider

Javascript Slider Issue

Javascript Image Slider Help...

Html5 Slider Help, New To Javascript

Jquery Slider - Form Repopulate Slider Field