Results 1 to 6 of 6

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

  1. #1
    Join Date
    Aug 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,025
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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.

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,813
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,025
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,395
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    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 -->
    Last edited by molendijk; 08-14-2013 at 03:06 PM. Reason: Correction

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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
    Last edited by jscheuer1; 08-14-2013 at 04:26 PM. Reason: detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Could I make a Featured Content Slider with two rows of buttons?
    By viconia in forum Dynamic Drive scripts help
    Replies: 18
    Last Post: 11-28-2012, 05:01 PM
  2. Resolved Featured Content Slider random image?
    By cool263 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-04-2009, 08:14 PM
  3. Featured Content Slider, make it change on hover?
    By A2597 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 04-03-2008, 04:15 PM
  4. missing image when using Featured Content Slider
    By gstrekkie in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 03-23-2007, 06:47 PM
  5. Featured Content Slider, Can I Make My Own Buttons?
    By joshywood in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 03-09-2007, 11:38 PM

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
  •