“image/news rotation”?
-
Hey Guys & Girls
I’m looking for a quite popular these days effect of scrolling images/news.
example in wordpress: https://www.thefordstory.com/
This effect have any “name”?
Many sites got it, but its hard to find any js script. May by WP got ready plugin for this?
-
That’s a featured content script.
You can made that using jquery. I have some featured content scripts. If you are interested, just leave a message and i’ll explain how to create a featured content.Hey. Yea, it would be great if you can explain some more ??
First of all, i uploaded the plugin here, but i’ll try to explain you how it works.
So, you need: jquery, jquery-ui and image.php.
In your theme directory, create a folder named js. Copy the two javascript files there. In the theme directory, copy image.php. Also, create imagecache directory and make it writeable (chmod 777).
Open header.php and before <?php wp_head(); ?>, paste:<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-ui.min.js"></script>
Now, open you style.css file and at the end of the file, paste this code
#featured{ width:480px; padding-right:190px; position:relative; float:right; margin-right:10px; border:2px solid #a9a9a9; -moz-border-radius: 3px; -webkit-border-radius: 3px; height:250px; background:#fff; overflow:hidden; } #featured ul.ui-tabs-nav{ position:absolute; top:0; left:390px; list-style:none; padding:0; margin:0; width:285px; } #featured ul.ui-tabs-nav li{ padding:0px 0; padding-left:12px; font-size:12px; color:#666; } #featured ul.ui-tabs-nav li img{ float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee; } #featured ul.ui-tabs-nav li span{ font-size:11px; font-family:Verdana; line-height:18px; } #featured li.ui-tabs-nav-item a{ display:block; height:60px; color:#333; background:#fff; line-height:20px; } #featured li.ui-tabs-nav-item a:hover{ background:#f2f2f2; } #featured li.ui-tabs-selected{ background:url('../images/selected-item.png') top left no-repeat; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:url('../images/bg-li.png') top left no-repeat; } #featured .ui-tabs-panel{ width:390px; background:#999; position:relative; } #featured .ui-tabs-panel .info{ position:absolute; top:180px; left:0; height:70px; background: url('../images/transparent-bg.png'); } #featured .info h2{ font-size:18px; font-family:Georgia, serif; color:#fff; padding:5px; margin:0; overflow:hidden; } #featured .info p{ margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0; } #featured .info a{ text-decoration:none; color:#fff; } #featured .info a:hover{ text-decoration:underline; } #featured .ui-tabs-hide{ display:none; }
Now, in your theme folder, created featured.php file (right click -> new -> text file). Open it. Paste this code inside the file:
<script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script>
Now it’s time to build the featured content. In the featured.php file, after the </script> tag, paste this
<div id="featured" > <ul class="ui-tabs-nav">
We need to define the category from where will be extracted the posts.
After “<ul class=”ui-tabs-nav”> add<?php $postcount = 0; $featured_query = new WP_Query('cat=3'); while ($featured_query->have_posts()) : $featured_query->the_post(); get_the_ID(); $postcount++; ?>
Now, we add the left image for the featured content:
<?php // get the image filename $value_feat_img = get_post_custom_values("image"); if (isset($value_feat_img[0])) { ?> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-<?php echo $postcount; ?>"><a href="#fragment-<?php echo $postcount; ?>"> <img src="<?php bloginfo('template_url'); ?>/image.php?width=80&height=50&cropratio=2:1&image=<?php $values = get_post_custom_values("image"); echo $values[0]; ?>" alt=""/><span><?php the_title(); ?></span></a><?php } ?> </li> <?php endwhile; ?> </ul>
When you want to add a image for the featured post, in the custom field, add image field and point to the image address (the image must be hosted on the same domain).
For the right content, add this, after the preceding code:<?php $postcount = 0; $featured_query = new WP_Query('cat=6'); while ($featured_query->have_posts()) : $featured_query->the_post(); get_the_ID(); $postcount++; ?> <!-- Content --> <div id="fragment-<?php echo $postcount; ?>" class="ui-tabs-panel" style=""> <?php // get the image filename $value_img = get_post_custom_values("image"); if (isset($value_img[0])) { ?> <img src="<?php bloginfo('template_url'); ?>/image.php?width=390&height=300&image=<?php $values = get_post_custom_values("image"); echo $values[0]; ?>" alt="" /> <?php } ?> <div class="info" > <h2><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></h2> <?php the_excerpt(); ?> </div> </div> <?php endwhile; ?>
Finally, close the divs:
</div> </div> </div>
Now, where you want to get the featured content, just paste this code:
<?php include (ABSPATH . '/wp-content/themes/YOURTHEME/featured.php'); ?>
(just remember to change YOURTHEME)
I attached this script as a plugin. Just copy it to plugins folder, change imagecache permission to 777, activate the plugin from wordpress admin panel and copy the code
<?php include (ABSPATH . '/wp-content/plugins/featuredcontent/featured.php'); ?>
where you want the featured content to be shown.
Excuse my English.Oh man, you are my God ?? Thanks so much!
You’re welcome. If you have problems, just post a message.
Is there such a thing where the content manager can work like the https://www.bbc.co.uk page where the use can go under specific post heading and the images change. such as the one under the More top stories section.
- The topic ‘“image/news rotation”?’ is closed to new replies.