Can i make the image clickable on Featured Content Slider v2.5

**xsyam** · 08-14-2013, 09:25 AM

1) Script Title: Featured Content Slider v2.5

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

3) Describe problem: I use this script and working well. thank you for it.

and i want the image from each slide clickable and linked, i tried add an a href but only text on caption linked not the image.

Code:

    <a href="#" title=""> <-- the link
		<div class="contentdiv" style="background-image:url(assets/images/home/1.jpg); background-repeat:no-repeat; "><!--slider 1 start-->   
			 <div class="slider"><!--slider content text 1 open-->
				 <div class="slider_project_name"></div>
					 <div class="slider_content">Image Description</div>
					 <div class="slider_more"><a href="#">More link</a></div>
			  </div><!--slider content text 1 close -->
		 </div><!--end of slider 1 -->
	</a>

but when i inspect element on ff show much a href links

Code:

<div class="contentdiv" style="background-image: url("assets/images/home/1.jpg"); background-repeat: no-repeat; display: block; z-index: 285; opacity: 1.1; visibility: visible;">
<a title="" href="#"> </a>  <-- the tag closed here 
<div class="slider">
<a title="" href="#">     <- link 2 appear
<div class="slider_project_name"></div>
<div class="slider_content">Image Description</div>
</a>
<div class="slider_more">
<a title="" href="#"></a> <-- link 3 appear
<a href="#">More link</a>
</div>
</div>
</div>

thanks in advance

**Beverleyh** · 08-14-2013, 10:45 AM

Well the content of each slide goes here (red);

Code:

<div class="contentdiv">
Content 1 Here.
</div>

So try changing your markup to something like this;

Code:

 
		<div class="contentdiv"><!--slider 1 start-->   
		    <a href="#" title=""><div style="background-image:url(assets/images/home/1.jpg); background-repeat:no-repeat; ">
			 <div class="slider"><!--slider content text 1 open-->
				 <div class="slider_project_name"></div>
					 <div class="slider_content">Image Description</div>
					 <div class="slider_more"><a href="#">More link</a></div>
			  </div><!--slider content text 1 close -->
		    </div></a>
		</div><!--end of slider 1 -->

Basically, put your linked image into its own div within the <div class="contentdiv"> div.

If you need more help, please provide a link to your page.

**vwphillips** · 08-14-2013, 11:55 AM

A DIV is a 'block' element a link A is an 'inline' element.

A 'block' element can not be nested in an 'inline' element.

If you need to provide a link to the DIV element you can overlay a 'blank' image over the DIV content

Code:

		<div class="contentdiv" style="background-image:url(assets/images/home/1.jpg); background-repeat:no-repeat; "><!--slider 1 start-->
          <div class="slider"><!--slider content text 1 open-->
				 <div class="slider_project_name"></div>
					 <div class="slider_content">Image Description</div>
					 <div class="slider_more"><a href="#">More link</a></div>
			     </div><!--slider content text 1 close -->
                 <a href="#" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.jpg" style="position:absolute;z-Index:101;left:0ox;top:0px;width:100%;height:100%;border-Width:0px;"></a>
     	</div><!--end of slider 1 -->

or nest a linked image in the DIV element

**Beverleyh** · 08-14-2013, 12:03 PM

Good point Vic !

In HTML4 you shouldn't put the <a> tag outside of the <div>, but in HTML5 you can - you haven't said which one you're using so you'd need to use the approach which best suits your doctype.

Alternatively, I believe you could change the inner div to a span and set the style to display:inline-block;. I *think* that would validate (haven't tested though). You can validate your web page here though and that will alert you to any problems: http://validator.w3.org/

**molendijk** · 08-14-2013, 02:05 PM

Or you could do this:

Code:

<div class="contentdiv"><!--slider 1 start-->   
		    <div onclick="location.href='#'" title=""><div style="background-image:url(assets/images/home/1.jpg); background-repeat:no-repeat; ">
			 <div class="slider"><!--slider content text 1 open-->
				 <div class="slider_project_name"></div>
					 <div class="slider_content">Image Description</div>
					 <div class="slider_more"><a href="#">More link</a></div>
			  </div><!--slider content text 1 close -->
		    </div></div>
		</div><!--end of slider 1 -->

**jscheuer1** · 08-14-2013, 02:29 PM

If you do that, you would have to cancel the bubble/stop the propagation of the "More Link" a tag's click event which gets a bit complicated since jQuery is not used by the script. If jQuery is already on the page for something else or can be added:

Code:

<script type="text/javascript">
jQuery(function($){
	$('.contentdiv a').click(function(e){e.stopPropagation();});
});
</script>

should take care of it.

I should also note that in these various scenarios, you cannot have an a tag inside another a tag. So Vic's idea of linking just the image seems best.

or nest a linked image in the DIV element