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.)
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:
Code:<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.Quote:
Originally Posted by ddadmin
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?
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.
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:
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.Code:<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>
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.Quote:
Originally Posted by ddadmin
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. :)Quote:
Originally Posted by nberidze
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):
Code:<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>
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.
So: where do I insert your code snippet?Code:<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>
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:
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.Code:<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>
Here is the whole featured.php.
Hmm the zip file didn't seem to have uploaded properly. Please re-zip and upload again.
Attachment 5598 here
Ok, try the latest modified .js file,which lets you specify a list of URLs to go to when the pagination links are clicked on, respectively, inside the initialization portion of the script. This lets you define the URLs without touching the dynamic, PHP generated portion of the script. To specify the links, add the code in red to your initialization code:
Code:<script type="text/javascript">
featuredcontentglider.init({
gliderid: "canadaprovinces", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: true, //Auto rotate contents (true/false)?
paginationlinks: ['http://cnn.com', 'http://google.com', 'http://dynamicdrive.com'],
autorotateconfig: [3000, 2], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
onChange: function(previndex, curindex, $allcontents){ // fires when Glider changes slides
//custom code here
}
})
</script>
Alright, thanks. But I want the reader to be able to click on each of the (in my case) five elements in the selector, and go to the full article. So somehow, paginationlinks must contain those five links. Links to the last five posts. How to do that? When I tried this, it worked for the first item in the selector, but not the next four.
To have an extra loop in there would not be desirable, as it would slow down the server.
Hmm by "each of the (in my case) five elements in the selector" do you mean each pagination link should go to a different URL, so if you have 5 pagination links, that means 5 links? If so this is simply done by specifying 5 links inside the paginationlinks option:Quote:
Originally Posted by nberidze
Code:paginationlinks: ['http://cnn.com', 'http://google.com', 'http://dynamicdrive.com', 'http://javascriptkit.com', 'http://cssdrive.com'],
Did you read my featured.php? If so, you see that the togglebox queries wordpress for five posts and shows the title, category and author of each. I want the reader to be able to open the permalink to the corresponding post by clicking.
Looking at featured.php in more detail now, I gather this is the portion of each pagination link that you actually want to onmouseover to load a panel, and onclick to go to a specific URL:
?Code:<span class="fet"><?php the_title(); ?></span>
Do you have a link to the fully generated page? It'll make things lot easier to picture.
I have sent you the link in a private message. Please get back to me when you have had a chance to look at it.