Where is you problem?
You need to use your javascript code with the loop….
I know i sound useful but it will help if you have some sort of code.
What do you mean by “the loop” ?
This is the code Javascript code:
Code moderated: Use a pastebin for anything more than 10-15 lines.
This is my index.php of the template:
Code moderated: Use a pastebin for anything more than 10-15 lines.
Ok……..
Ok, Let me try to explain……
1. You need to add a link to your Javascript on the header.php like this, add these too JS to your theme folder for example javascripts
<script type="text/javascript" src="<?php bloginfo('template_url');?>/javascript/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url');?>/javascript/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
2. If you planning on using this on the actual posts then, i would suggest using post thumbnails. You need to add this code to your functions.php
////This will allow you to have thumbnails feature enabled.
add_theme_support('post-thumbnails');
3. Then replace the above code refering to the slider like so.
<div id="slider" class="nivoSlider">
<?php $recent = new WP_Query(); ?>
<?php $recent->query('cat=344&showposts=7'); ?> <!--Change the category number to show what ever category you want to show images from.-->
<?php while($recent->have_posts()) : $recent->the_post(); ?>
<a href="<?php echo get_permalink() ?>" rel="bookmark" title="<?php _e('Read more:','afronews24')?> <?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
<?php endwhile; ?>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<font style="line-height:200%"><br></font>
</div>
</div>
This is the basic explanation i can have, i hope it works for you.
I didn’t do step 2 and 3, because I want to be able to control the images going on there and the links they go to.
But thanks!! If you look:
I am half way there!
The script seems to work now, however the images are not displayed
I don’t see what’s wrong with the code though (I have an images folder with the images all named correctly (it worked when I previously did it without wordpress))
<div id="sliderspace">
<div id="slider" class="nivoSlider">
<a href="http://www.aizendigital.com"><img src="/images/toystory.jpg" alt="" title="#htmlcaption" /></a>
<a href="http://www.aizendigital.com"><img src="/images/up.jpg" alt="" title="#htmlcaption" /></a>
<a href="http://www.aizendigital.com"><img src="/images/walle.jpg" alt="" title="#htmlcaption" /></a>
<a href="http://www.aizendigital.com"><img src="/images/nemo.jpg" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<font style="line-height:200%"><br></font>
</div>
</div>
Thank you for your help, I really appreciate it!
Okay I have replaced the /images/pic.jpg – with the actual url now, and it works (however I would still rather know why it wouldnt work the other way =\
Anyway, it works, but… it’s completely messed up =[
+ The black bar over the buttons doesnt show anymore, I think this might be my css clashing??
=[