How to make a normal URL work inside Featured Content Glider?

[nberidze]

1) Script Title: Featured Content Glider

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

3) Describe problem: How to insert a normal URL into the script so that when the reader clicks on one of the items, browser follows that URL normally (as opposed to displaying current/previous/next item in glider.)

[ddadmin]

Hmm please clarify what you mean by insert a link into the script. Do you mean a link inside one of the content slides? If so each content slide's actual content is just HTML, so you're free to define any HTML you like inside it, for example:

<div class="glidecontent">
<img src="http://i15.tinypic.com/72vilba.jpg" style="float: right; padding: 5px"/>
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry. <a href="http://www.google.com">Google</a>
</div>

[nberidze]

Hmm please clarify what you mean by insert a link into the script. Do you mean a link inside one of the content slides? If so each content slide's actual content is just HTML, so you're free to define any HTML you like inside it, for example:

<div class="glidecontent">
<img src="http://i15.tinypic.com/72vilba.jpg" style="float: right; padding: 5px"/>
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry. <a href="http://www.google.com">Google</a>
</div>

No, I mean to include an URL inside the selector - the area where you can choose previous/current/next item in the glider. I'm looking at a theme where the creator has modified this glider code so that there is a selector area and a featured post area. The selector area contains the headlines of all five featured posts, while the featured posts rotates between the five. When you click on one of the items in the selector area, the corresponding post (excerpt+thumbnail) appears in the featured post area.

Our readers have asked: is it possible to click on the selector area and go directly to the full post? To do that we would have to have a URL in the selector area. I've tried, but it made some strange changes. So I was wondering, has anybody else done this, and is there a recommended way to do it?

[nberidze]

I want the link in the selector, not the glider content. Many of our readers have asked to make the selector point directly to the full article, not the glider content.

[ddadmin]

Hmm, the "selector" section of the script is also implemented as regular HTML (with certain class names triggering special functionality). So if you want to swap out the default pagination links with links that actually go to specific URLs, you can simply do so via regular HTML, ie:

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a> 
<a href="http://www.dynamicdrive.com">Page 1</a> <a href="http://www.cssdrive.com">Page 2</a> <a href="http://www.google.com">Page 3</a>
<a href="#" class="next">Next</a>
</div>

Or are you asking for a way to store all the URLs inside a JavaScript variable and have the links dynamically generated? This would only make sense if you have lots of links.

[nberidze]

Hmm, the "selector" section of the script is also implemented as regular HTML (with certain class names triggering special functionality). So if you want to swap out the default pagination links with links that actually go to specific URLs, you can simply do so via regular HTML, ie:

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a> 
<a href="http://www.dynamicdrive.com">Page 1</a> <a href="http://www.cssdrive.com">Page 2</a> <a href="http://www.google.com">Page 3</a>
<a href="#" class="next">Next</a>
</div>

Or are you asking for a way to store all the URLs inside a JavaScript variable and have the links dynamically generated? This would only make sense if you have lots of links.

No, the first one. Just a normal URL. I want the selector to show the featured story which the pointer hovers over, but if the user clicks, he/she gets sent to the actual URL of that article.

This is a very common type of funtionality.

[ddadmin]

No, the first one. Just a normal URL. I want the selector to show the featured story which the pointer hovers over, but if the user clicks, he/she gets sent to the actual URL of that article.

This is a very common type of funtionality.

Ah ok you should have just said that then- show feature story onmouseover, go to a URL onclick.

Try the below modified .js file, which selects a panel when the mouse rolls over one of the pagination links. Your pagination links should still contain a CSS class of "toc", but with a href defined to point to a URL (so it goes to that page when clicked on):

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a> 
<a href="http://www.cnn.com" class="toc">Page 1</a> <a href="http://cssdrive.com" class="toc">Page 2</a> <a href="http://dynamicdrive.com" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>

[nberidze]

Thanks! Can you look a little bit at my code. I am using the wordpress theme BTextended, which is using a modified featured content glider.

<div id="togglebox" class="glidecontenttoggler">
<a href="#" class="prev"></a>
<?php
        $slidecat = get_option('BTExtended_slide_category');
        $my_query = new WP_Query('showposts=5&offset=0');
while ($my_query->have_posts()) : $my_query->the_post();$do_not_duplicate = $post->ID;
?>
<a href="#" class="toc">
<small><?php
$category = get_the_category();
echo $category[0]->cat_name;
?></small>
<span class="fet"><?php the_title(); ?></span>
<small>by <?php the_author(); ?></small>
</a>
<?php endwhile; ?>
<a href="#" class="next"></a>
</div>

So: where do I insert your code snippet?

[ddadmin]

Ok with PHP and templating involved you probably don't want to edit that part of your page unless you're familiar with PHP. Is the entire markup of your featured content glider dynamically generated, ie, the following portion as well:

<div id="canadaprovinces" class="glidecontentwrapper">

<div class="glidecontent" data-url="http://www.cnn.com">
<img src="http://i11.tinypic.com/8efzmmf.jpg" style="float: left; padding: 5px" />
British Columbia is the westernmost of Canada's provinces and is famed for its natural beauty. It's capital is Victoria, located at the southeastern tip of Vancouver Island. BC's most populous city is Vancouver, located in southwest corner of the BC mainland called the Lower Mainland. 
</div>

<div class="glidecontent" data-url="http://www.google.com">
<img src="http://i15.tinypic.com/72vilba.jpg" style="float: right; padding: 5px"/>
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry.
</div>

<div class="glidecontent" data-url="http://www.dynamicdrive.com">
<img src="http://i17.tinypic.com/8bg0lkx.jpg" style="float: left; padding: 5px"/>
Yukon, still commonly referred to as "The Yukon Territory", is the westernmost of Canada's three northern territories. The Yukon's major appeal is its nearly pristine nature. Tourism relies heavily on this and there are many organised outfitters and guides available to hunters and anglers and nature lovers of all sorts.
</div>

</div>

I'm trying to figure out which portion is not- and just static HTML you add manually to your page- in which I can use to define the URL of each pagination link.

[nberidze]

Here is the whole featured.php.