11 Replies Latest reply: Dec 17, 2012 9:38 AM by Digital Ink LLC RSS

    js slider image link won't work

    Digital Ink LLC Community Member

      I am trying to add a link to an image in a tm_slider banner slideshow image. The a href tag isn't working. Adding it through add behavior also did not work. Adding a hotspot to the .png also did not work. Any suggestions?

      https://micounties.org/

        • 1. Re: js slider image link won't work
          Nancy O. MVP

          First things first.  Fix your HTML  errors.

          http://validator.w3.org/check?verbose=1&uri=https%3A%2F%2Fmicounties.org%2F

           

          And on lines 709 & 727 of style.css, you have used invalid property:values.  Delete them.

           

          .cse .gsc-control-cse div,

          .gsc-control-cse div {

          position: normal;

          }

           

          .cse .gsc-resultsHeader,

          .gsc-resultsHeader {

          border: block;

          }

           

          When you get your code errors sorted & uploaded, post back.

           

           

          Nancy O.

          • 2. Re: js slider image link won't work
            Digital Ink LLC Community Member

            I looked over the errors. I changed some of them, had to change some of them back. I also made the changes you suggested to the style.css file.

             

            Links to the image in the tm_slider header are still not working. Thank you for trying, though.

            • 3. Re: js slider image link won't work
              Nancy O. MVP

              44 errors is unacceptable. You're using an HTML5 doc type which is

                   a) not the same as HTML4 or XHTML1 and

                   b) much less forgiving of code errors. 

               

              On line 117 you have this:

              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

               

              Which should be changed to this.

              <meta charset="utf-8">

               

              And again on line 137,

              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


              Delete it.

               

              You have carelessly used <br /> instead of <br> throughout your document. 

               

              You  have <br /> inside lists (not allowed).  If you need more padding between list items use CSS line-height, not break tags.

               

              You have style tags inside <div> tags. Styles don't belong there.  They belong in your style sheet.

               

              Finally, you have used ampersands in your folder and filenames.   Special characters should never be used in folder/ filenames.  On the web, it's OK to use dashes - or underscores _ but no spaces or special characters (@#$%^&*+) which are used by programming languages .

               

              Keep working.

               

               

              Nancy O.

              • 4. Re: js slider image link won't work
                Digital Ink LLC Community Member

                Corrected as many errors as I could and made the changes you suggested. Still can't get the slider images to link using the a href tag. I still think it's in the tms-0.3.js file... somewhere.

                • 5. Re: js slider image link won't work
                  Digital Ink LLC Community Member

                  Here's the portion of the code in the js file that refrences using the a href tag. I'm wondering if an option needs activating or identifying.

                   

                  paginationFu:function(){

                                                                  var _=this                                                                           

                                                                  if(_.pagination===false)

                                                                                  return false

                                                                  if(_.pagination===true)

                                                                                  _.pags=$('<ul></ul>')

                                                                                                  .addClass(_.paginationCl)

                                                                                                  .appendTo(_.me),

                                                                                  $(_.itms).each(function(i){

                                                                                                  var li=$('<li></li>'),

                                                                                                                   a=$('<a href="#"></a>')

                                                                                                                                   .text(_.pagNums?i+1:'')

                                                                                                                                   .appendTo(li)

                                                                                                                                   .bind(_.changeEv,function(){

                                                                                                                                                   _.changeFu(i)

                                                                                                                                                   return false

                                                                                                                                   })

                                                                                                  _.pags.append(li)

                                                                                  }),

                                                                                  _.pags=_.pags.find('li'),

                                                                                  _.pags.eq(_.n).addClass(_.currCl)

                                                                  else

                                                                                  _.pags=$(_.pagination)

                                                  },

                   

                  I sure appreciate your help! Thank you!

                  • 6. Re: js slider image link won't work
                    Nancy O. MVP

                    For some reason, your page doesn't like </a> tags in the TMSlider.  I don't know why that is.

                     

                    Try replacing what you have now on lines 249 - 253 with this code and see if it works for you.

                     

                    <div class="slider">

                      <ul class="items">

                      <li><a href="events.php"><img src="images/page1-slide2update.png" alt="New Commissioner Workshops 2012" /></li>

                      <li><a href="about.php"><img src="images/page1-slide1update.png" alt="Grand Rapids, Michigan" /></li>

                    </ul>

                    </div>

                     

                     

                    Good luck!

                     

                     

                    Nancy O.

                    • 7. Re: js slider image link won't work
                      Digital Ink LLC Community Member

                      Thanks, Nancy! It didn't work - thinking of coming up with a work around. Client wants the images in the slider to link but I just can't get that working right. All tips and forums point to the a href tag but like you said for some reason the slider isn't liking it.

                       

                      Thanks so much for all your tips, though. After two days - I think it's time for an alternate solution.

                      • 8. Re: js slider image link won't work
                        Nancy O. MVP

                        Nivo and Wow sliders support URLs.

                         

                         

                        Nancy O.

                        • 9. Re: js slider image link won't work
                          Digital Ink LLC Community Member

                          Thank you Nancy! You are correct! All troubleshooting with regard to this issue point to using another slider. I'll look into the two you mention here.

                           

                          Appreciated your valuable feedback with regard to the site.

                          • 10. Re: js slider image link won't work
                            Digital Ink LLC Community Member

                            I purchased a license for WowSlider, decided I liked it better. Troubleshooted nearly all issues (menu hiding behind slider was resolved by resetting z-index for the menu to 101, WowSlider is set to 100). However, issues continue with the menu. I even set z-index to 999 and added a bunch more z-index values to different parts of the menu in css.

                             

                            I've narrowed it down to it being related to having multiple jquery objects on a page. I have a conflict with the Superfish menu and the WowSlider - only on the homepage, where WowSlider is. The forums suggest inserting the following noconflict code which I did but it made the menu fail completely.

                            <script type="text/javascript">

                            jQuery.noConflict();

                            var $j = jQuery;

                            </script>

                             

                            I need to do more with this noconflict command but can't find an example I understand. Your expert advice most appreciated. I'm hoping I'm close.

                            Thanks.

                            • 11. Re: js slider image link won't work
                              Digital Ink LLC Community Member

                              Nancy, since the above issue was new, I decided to move it over to a new discussion. I already noted that your reply (suggesting other sliders) resolved the first issue. Still learning my way around support forums like this one. Thanks