• Okay so I had built (by built I mean I got the code and just manipulated it to fit my needs) this:

    Old

    I really want to keep this slideshow, because it is exactly what I want!

    Now part of my web design is to have a blog and I didn’t realize using wordpress would take over my whole site, I’m a very hands on guy so I’m quite upset that I have to shift through a scary amount of code that I don’t understand…

    Anyway, I’m trying to get this slideshow working again by intergrating it into the template that I’m using – however:

    As you can see

    I am having a hard time doing it, – it won’t load anything, I have a feeling it’s to do with the javascript not working? technically it should all link up fine, because I’ve put all the files in the right place…

    Any advice ? (I’m new to WordPress so I’m not sure if it will or won’t work)

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter miren2k

    (@miren2k)

    Anyone? Please?

    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.

    Thread Starter miren2k

    (@miren2k)

    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.

    Thread Starter miren2k

    (@miren2k)

    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.

    Thread Starter miren2k

    (@miren2k)

    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!

    Thread Starter miren2k

    (@miren2k)

    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??

    =[

    Thread Starter miren2k

    (@miren2k)

    anyone? advice??

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Building a Front Page slideshow, please help =[’ is closed to new replies.