go41

Content Slider jQuery UI for WordPress with timthumb How To

von Joern am 26. Nov. 2009 | Keine Kommentare

You want to get a jQuery content slider into your WordPress site? If you use the free theme arthemia with a working timthumb script you will find a solution here to display the latest 4 posts in a nice slider based on ‚Featured Content Slider Using jQuery‘ at http://demo.webdeveloperplus.com/featur … nt-slider/
I modified the index.html given to run in WordPress and query the 5 latest posts. The slider is using timthumb to resize images from the custom field ‚Image‘. Your images should be minimum 610x310px in size to fill the full image space.
BACKUP YOUR FILES BEFORE EDITING PLEASE!
A walk through:
Open and insert in header.php after <?php wp_head(); ?> and before </head> the following lines to include the Javascript we need:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myslider").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
Open and add to the end of your arthemia theme style.css the following lines:
/* ui slider css stuff */
#myslider{
width:630px;
padding-right:300px;
position:relative;
border:5px solid #ccc;
height:310px;
background:#fff;
}
#myslider ul.ui-tabs-nav{
position:absolute;
top:0; left:610px;
list-style:none;
padding:0; margin:0;
width:320px;
}
#myslider ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#myslider ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#myslider ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#myslider li.ui-tabs-nav-item a{
display:block;
height:75px;
color:#333; background:#fff;
line-height:20px;
}
#myslider li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#myslider li.ui-tabs-selected{
background:url(‚images/selected-item.gif‘) top left no-repeat;
}
#myslider ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#myslider .ui-tabs-panel{
width:610px; height:310px;
background:#999; position:relative;
}
#myslider .ui-tabs-panel .info{
position:absolute;
top:240px; left:0;
width:610px; height:70px;
background: url(‚images/transparent-bg.png‘);
}
#myslider .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#myslider .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#myslider .info a{
text-decoration:none;
color:#fff;
}
#myslider .info a:hover{
text-decoration:underline;
}
#myslider .ui-tabs-hide{
display:none;
}
copy images for this css classes to your arthemia/images (or themes/images) folder: transparent-bg.png and selected-item.gif

you get this images on the ‚Download source code and try‘ of the site I gave on top.
Open up index.php and add under <?php if(!is_paged()) { ?> this:
<?php if(file_exists(TEMPLATEPATH . ‚/myslider.php‘)) {

include (TEMPLATEPATH . ‚/myslider.php‘); } ?>
This two lines translate to: if there is a file called myslider.php in the folder of the theme go and use it. As long you didn’t create this new template file nothing will happen.
Remark: this if(!is_paged()) you will find only in arthemias index.php as this theme displays Headline and Featured only on the first page.
Now we create a file called myslider.php to put into your themes folder with the following content:
<div id="myslider" >
<ul class="ui-tabs-nav">
<?php query_posts(’showposts=4′); $i = 1; if (have_posts()) { while (have_posts()) { the_post(); ?>
<li class="ui-tabs-nav-item <?php if ($i == 1) { ?>ui-tabs-selected<?php } ?>"<?php echo ‚id="nav-fragment-‚ . $i . ‚"><a href="#fragment-‚ . $i . ‚">‘; ?>
<?php $values = get_post_custom_values("Image"); if (isset($values[0])) { ?>
<img src="<?php echo bloginfo(‚template_url‘); ?>/scripts/timthumb.php?src=/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=100&h=65&zc=1&q=80" alt="" />
<?php } ?>
<span><?php the_title(); ?></span></a></li>
<?php $i++; } // end while loop
} // end if
wp_reset_query(); ?>
</ul>
<?php query_posts(’showposts=4′); $i = 1; if (have_posts()) { while (have_posts()) { the_post(); ?>
<?php echo ‚<div id="fragment-‚ . $i . ‚" class="ui-tabs-panel" style="">‘; ?>
<?php $values = get_post_custom_values("Image"); if (isset($values[0])) { ?>
<a href="<?php the_permalink() ?>" ><img src="<?php echo bloginfo(‚template_url‘); ?>/scripts/timthumb.php?src=/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=610&h=310&zc=1&q=80" alt="" /></a>
<?php } ?>
<div class="info" >
<h2><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></h2>
<p><?php the_content_rss(“, TRUE, “, 30); ?><a href="<?php the_permalink() ?>" >read more</a></p>
</div>
</div>
<?php $i++; } // end while loop
} // end if
wp_reset_query(); ?>
</div>
As soon you put this file onto your site, you should see something and enjoy.
Now you could remove the whole headline and featured section from arthemia, I hope you know how to do..
See a DEMO here: Free WordPress Themes Testrun
Any questions? -> Create an account and ask!
____________________
you find me on Google+, Twitter and Facebook

(von: Joern)

Hier noch 31 weitere Ergebnisse dieses Threads:

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by master

29. Nov. 2009 (von: master)

A new Wordpress theme 'Arthemix Bronze' with this slider on top can be found here:link disabledDownload you can request here or wait for the final version!____________________you find me on Google+, Twitter and Facebook Weiterlesen →

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by teoman

13. Mrz. 2010 (von: teoman)

hello,installed artemix-green but the image slider does not work;it does not change pictures and when i change to any of the link on right (#fragment-1 to 4) insted of image change like a new page open and slider disapper.what can…

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by cricrazy

27. Mrz. 2010 (von: cricrazy)

Hi Joern,This is christian from bibleseo. is there a way to get rid of side panel in the slider? And instead put Left and right arrows, right inside the main slider (like http://bibleseo.com/biblestudyblog/). This would help bring the sidebar come…

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by master

27. Mrz. 2010 (von: master)

give me some time pls, Joern____________________you find me on Google+, Twitter and Facebook Weiterlesen →

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by master

28. Mrz. 2010 (von: master)

@cricrazysee the demo here in frontlist beside the sidebar:http://themes.go41.de/ (no demo any more...)Is that what you mean?I will explain how to get the 'arras slider' in Arthemia soon.____________________you find me on Google+, Twitter and Facebook Weiterlesen →

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by cricrazy

28. Mrz. 2010 (von: cricrazy)

Hello masteradmin,This is exactly, what I was looking for. Let me know how to achieve it in arthemia. Weiterlesen →

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by Joern

29. Mrz. 2010 (von: Joern)

I opened a new topic 'slideshow using jQuery cycle for WordPress' here:viewtopic.php?f=1&t=79Hope you can handle it, good luck!____________________you find me on Google+, Twitter and Facebook Weiterlesen →

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by msderky

1. Mai. 2010 (von: msderky)

so i have the slideshow working but i am trying to get my header to be over the slideshow.i looked at a similar post and i have tried changing the z-index to the header and all of the tags that…

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by master

1. Mai. 2010 (von: master)

Derky, that's difficult I guess. I wonder how your navbar under her arms is working? As you might have seen, you can bring folding menues in front of the slideshow.Actually I would say putting an other image over this would…

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by msderky

1. Mai. 2010 (von: msderky)

yep the menubar doenst work under the picture so i planned on having just a link page for home and contact.i may just remove the slideshow from the theme because with it just being a regular headline post the image…

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by Kirei

17. Jun. 2010 (von: Kirei)

Hey there,I want to bring this onto my site, but a few things I have a question on. 1. I don't want my recent posts in the slider. I want only select posts. How can I make it so only…

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by Joern

18. Jun. 2010 (von: Joern)

to show posts from one category only you have to modify the query, it is in this line:Code:<?php query_posts('showposts=4'); $i = 1; if (have_posts()) { while (have_posts()) { the_post(); ?>this 'query_posts' needs one more parameter, if you want... Weiterlesen →

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by Kirei

18. Jun. 2010 (von: Kirei)

Hmm didn't work. I created a test site for this.It worked fine, but after I added the cat code it kinda messed up. It's still showing the "new" posts vs just the category.It also isn't showing the correct Featured pictures/posts…

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by Joern

18. Jun. 2010 (von: Joern)

sorry, didn't think about that:The query repeats, it's twice in this script!so go through the code and find the second query to modify exactly the same way as the first.Anyway, it's running..make a backup of index.php and remove the complete…

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by Kirei

18. Jun. 2010 (von: Kirei)

Fantastic, test blog is working great and I'm going to implement it on my site today. Thank you so much for helping and for responding so quickly. I really do appreciate it. Weiterlesen →

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by Kirei

18. Jun. 2010 (von: Kirei)

Well now this is interesting. I changed everything on my actual site, removed the headline/featured code as well, but my site hasn't changed at all. It doesn't even recognize that I removed the headline/featured area. Any thoughts? I thought it…

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by Joern

18. Jun. 2010 (von: Joern)

your actual site looks 'unmodified' indeed.How do you edit the t5emplate files?I mean doing this in the theme editor seems sometimes not to work.I personally edit all files on a copy of my files on the server. This copy is…

Re: Content Slider jQuery UI for WordPress with timthumb How To :: Reply by Kirei

19. Jun. 2010 (von: Kirei)

Well sure enough it was that simple. I was editing the files through the Dashboard of Wordpress, but it wasn't changing the actual index.php at all. Which is just weird because I've changed code there before and it's worked like…

Help with Arthemia Navigation Bar – on multiple lines

24. Mrz. 2012 (von: lbgattis)

You have a ton of great information, so thank you for that! I am struggling big time! I want to get my blog up and running but can't because I cannot figure out how to fix the navigation bar. See…

Re: Help with Arthemia Navigation Bar – on multiple lines :: Reply by master

24. Mrz. 2012 (von: master)

Sorry, checked your site, but in the moment it just shows a functions.php error ..Parse error: syntax error, unexpected $end in /.../www.....com/wp-content/themes/arthemia/functions.php on line 3028that file should not have 3000 plud lines, even arthem... Weiterlesen →

Arthemia Premium – Customizing the Column List

27. Mrz. 2012 (von: pelusa)

Hi,I have seen how helpful the forum has been to those working with this theme and I was wondering if you might be able to help me.I would like to show posts from specific categories in the column list in…

increasing pixels in an image

28. Mrz. 2012 (von: kinyofu)

Hi Joern, I hope you are well. I am not sure if you can answer this, but I will give it a shot.My site: choosetoevolve.comI made a logo in Publisher, took a screen copy of image and placed it in…

Re: increasing pixels in an image :: Reply by Joern

28. Mrz. 2012 (von: Joern)

you might try to disable the theme's cropping tool and haeder image stuff..In header.php of yoko you find close to the end of that file<!--end header image-->the header image is created in the 10 lines above, starting after '-end site…

Re: Arthemia Premium – Customizing the Column List :: Reply by Joern

28. Mrz. 2012 (von: Joern)

that is quite a challenge..I just explain how I would start to do that:check the source code of the demo theme here:http://www.elegantthemes.com/preview/TheStyle/in that code you see that they actually load the name of the category and the date just after…

Re: increasing pixels in an image :: Reply by Joern

29. Mrz. 2012 (von: Joern)

@Kinyofutry this image, I scaled it up somehow..it is a .gif file!! means in header you have to change the filenamehere the link:image/BW_logo.gifor what about that?image/BW_logo_color.gif____________________you find me on Google+, Twitter and Facebook Weiterlesen →

Autor:

Du findest mich auch auf Google+, Twitter und Facebook!

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


weitere forum Beiträge: