Scarlett theme for wordpress: make your own slider / sliding panel optimization

Scarlett theme for wordpress: make your own slider / sliding panel optimization

The scarlett theme for wordpress is well known for his beautifull slider. But if you want to have your own images with their own link (to a category for example), here is how to do it: 1- This is how the original slide.php looks like:


<script type="text/javascript"><!--mce:0--></script>
<div id="myslides">
<div id="mygallery">
<div>

<!--p

$slidecat = get_option('scar_gldcat');

$slidecount = get_option('scar_gldct');

$my_query = new WP_Query('category_name= '. $slidecat .'&showposts='.$slidecount.'');

while ($my_quer-->have_posts()) : $my_query->the_post();$do_not_duplicate = $post->ID;

?>
<div>

<!--p $screen = get_post_meta($pos-->ID, 'screen', $single = true); ?>

<img src="http://www.benwake.com/wp-admin/%3C?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $screen; ?>&h=100&w=200&zc=1" alt="" />
<h2><a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="http://www.benwake.com/wp-admin/%3C?php the_permalink() ?>"><!--p the_title();--></a></h2>
</div>
<!--p endwhile;--></div>
</div>
</div>

2- this is how to modify it. You only have to change the div class panel.:

<div style="left: 956px; float: none; position: absolute;"> <a href="the link where you want to go"><img src="the link to the image you want to display" alt="" /></a>
<h2><a title="Overclocking" rel="bookmark" href="the title">Overclocking</a></h2>
</div>

Update: Exemple:

<div id="mygallery" class="stepcarousel">

<div class="belt" style="width: 1434px; left: 0px;">
<div class="panel" style="float: none; position: absolute; left: 956px;"> <a href="http://www.benwake.com/overclocking"><img alt="" src="http://www.benwake.com/wp-content/gallery/slider/overclocking.jpg"></a>
<h2><a title="Overclocking" rel="bookmark" href="http://www.benwake.com/overclocking">Overclocking</a></h2>
</div>
<div class="panel" style="float: none; position: absolute; left: 239px;"> <a href="http://www.benwake.com/casemodding"><img alt="" src="http://www.benwake.com/wp-content/gallery/slider/casemodding.jpg"></a>
<h2><a title="Casemodding" rel="bookmark" href="http://www.benwake.com/casemodding">Casemodding</a></h2>
</div>
<div class="panel" style="float: none; position: absolute; left: 478px;"> <a href="http://www.benwake.com/electronics"><img alt="" src="http://www.benwake.com/wp-content/gallery/slider/electronics.jpg"></a>
<h2><a title="Electronics" rel="bookmark" href="http://www.benwake.com/electronicmods">Electronics</a></h2>
</div>
<div class="panel" style="float: none; position: absolute; left: 717px;"> <a href="http://www.benwake.com/gaming"><img alt="" src="http://www.benwake.com/wp-content/gallery/slider/lanparty.jpg"></a>
<h2><a title="Lanparty" rel="bookmark" href="http://www.benwake.com/gaming">Gaming & Lanparty</a></h2>
</div>
<div class="panel" style="float: none; position: absolute; left: 0px;"> <a href="http://www.benwake.com/apple"><img alt="" src="http://www.benwake.com/wp-content/gallery/slider/apple.jpg"></a>
<h2><a title="Apple" rel="bookmark" href="http://www.benwake.com/apple">Apple</a></h2>
</div>
<div class="panel" style="float: none; position: absolute; left: 1195px;"> <a href="http://www.benwake.com/software"><img alt="" src="http://www.benwake.com/wp-content/gallery/slider/software.jpg"></a>
<h2><a title="Software?" rel="bookmark" href="http://www.benwake.com/software">Software</a></h2>
</div>

That’s it :)

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
About Benwake

I'm Ben, working as a System Engineer for a big company. Webdesign is one of my biggest passions, along with a lot of other hobby's. I love to share my interests and I hope you'll enjoy this website. More Posts

2 Comments to “Scarlett theme for wordpress: make your own slider / sliding panel optimization”

  1. Tim Taylor // June 30, 2011 at 6:53 am // Reply

    This still doesn’t make sense to me… where do I put that code? Can you copy/paste the full code before and after? Thanks

  2. I made a quick update of the post, I hope it is clear.
    What I did is replace the php code with the one that is generated in html and paste that html code instead of the php one.
    If you want more info, you can still send me a mail, I will try to make it as clear as I can (for a special request)

Leave a comment

Your email address will not be published.

*