Response title
This is preview!
Jquery ui tabs
in Using jQuery UI
•
12 years ago
hello. I'm using ui tabs to create a slideshow and I'm using event: "mouseover" to change the slides but would like to also create a link from my li that when clicked goes to a separate page. I know the href used is pulling in the slides. Is it possible to pull from the li instead, so I can use the href to link to a page?
My code for the slideshow below.
- <section id="featured" >
- <div id="ui-tabs-container">
- <ul class="ui-tabs-nav">
- <li class="ui-tabs-nav-item ui-tabs-selected hide" id="nav-fragment-1"><a href="#fragment-1">
- <img src="-/img/slideshow/Welcome_image-th.jpg" alt="Welcome_image-th" width="75" height="55" />
- <h3 class="title">All Your Woodworking Needs in One Shop</h3>
- <p>Page through the list below to find out more about just some our services</p>
- </a></li>
- <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2">
- <img src="-/img/slideshow/pedistal_base-th.jpg" alt="pedistal_base-th" width="75" height="55" />
- <h3>Taxidermy Displays</h3>
- <p>Since 1922, Nippon Panels Co. has been creating quality wildlife panels. Make your trophy presentation distinct with a Nippon Panel. There is no substitute for a unique panel.</p>
- </a></li>
- <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3">
- <img src="-/img/slideshow/piano.jpg" alt="piano" width="75" height="55" />
- <h3>Piano & Furniture Restoration</h3>
- <p>Our artisans are dedicated to the restoration & preservation of heirloom furniture & collectibles; we are the area’s premier piano & organ restoration specialists.</p>
- </a></li>
- <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4">
- <img src="-/img/slideshow/Hughes-Kitchen.jpg" alt="Hughes-Kitchen" width="75" height="55" />
- <h3>Custom Woodworking</h3>
- <p>We know that our work will have to stand the test of time; the concept of pride from a job well done may seem "old fashioned", but to us…it is the way we do business.</p>
- </a></li>
- <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5">
- <img src="-/img/slideshow/Orellie's-Shadow-Boxes-th.jpg" alt="Orellie's-Shadow-Boxes-th" width="75" height="55" />
- <h3>Displays & Awards</h3>
- <p>We have the finest presentation awards on the market today because of our PA hardwoods & our attention to detail, we make your award perfect for your recipient.</p>
- </a></li>
- </ul>
- </div>
- <div id="slides">
- <div id="fragment-1" class="ui-tabs-panel" style="">
- <img src="-/img/slideshow/Welcome_image.jpg" alt="Welcome_image" width="592" height="399" />
- </div>
- <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
- <img src="-/img/slideshow/pedistal_base.jpg" alt="pedistal_base" width="592" height="399" />
- <p><a class="lmore" href="/nippon-panels/displays-pedestals-bases.php" title="Click here to learn more">Learn More about our Taxidermy displays.</a></p>
- </div>
- <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
- <img src="-/img/slideshow/piano-lg.jpg" alt="piano-lg" width="592" height="399" />
- <p><a class="lmore" href="/vantique-furniture/piano-organ-restoration.php" title="Click here to learn more">Learn More About Piano & Furniture Restoration </a></p>
- </div>
- <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
- <img src="-/img/slideshow/Hughes-Kitchen-lg.jpg" alt="Hughes-Kitchen-lg" width="592" height="399" />
- <p><a class="lmore" href="/vantique-furniture/kitchen-custom-refinishing.php" title="Click here to learn more">Learn More about Custom Woodworking</a></p>
- </div>
- <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
- <img src="-/img/slideshow/Orellie's-Shadow-Boxes.jpg" alt="Orellie's-Shadow-Boxes" width="592" height="399" />
- <p><a class="lmore" href="/nippon-panels/shadowboxes-awards.php" title="Click here to learn more">Learn More About Displays & Awards</a></p>
- </div>
- </div>
- </section>
- $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true).tabs({event: "mouseover"});
- $("#featured").hover(
- function() {
- $("#featured").tabs("rotate",0,true);
- },
- function() {
- $("#featured").tabs("rotate",5000,true);
- });
2