Question

I hoping someone out there can help me out with a Jquery problem I’m running into. I’m trying to find a way to load multiple pieces of content into a div using a next and back button.

Here’s a pic to explain:

Jquery Slideshow Picture http://www.lindsaygross.com/shared/slideshow.png

This is for a portfolio. Ideally what I would like this to do is when a user clicks on the left or right green arrow it changes all the client content below it (everything in .clientbox including the photo slideshow) to another div with a class of .clientbox.

I’m completely open to suggestions on a better way to structure this as well. I’ve thought about trying to make the client navigation pull the .clientbox info from other local html pages but I haven’t had any luck any way I’ve tried it.

Anyone have any ideas? I’m completely stuck on this one.

Here is the code I’m using:

    <div class="container_24 slider_clients">

<!-- Top Slider Navigation to rotate clients -->
<span class="grid_1 prefix_4">
        <a id="mainlf_slidenav" class="left"></a>
    </span>

  <span class="grid_12 prefix_1 slider_headertxt">
    <p>Client Number 1</p>
    </span>

  <span class="grid_1 prefix_1">
    <a id="mainrt_slidenav" class="right"></a>
    </span>

<!-- END Top Slider Navigation to rotate clients --> 

    <div class="clientbox">

    <div id="slides" class="clear_left">


    <div class="grid_2 clear_left">
        <!-- "previous slide" button --> 
        <a class="prev" id="sublf_slidenav"></a> <!-- Affects the <li> for each image in slider_background -->
    </div>


        <span class="grid_20 slider_background slides_container"> <!-- DIV FOR PHOTOS OF EACH CLIENT -->

                <img src="images/logo.png" alt="Client Image 1" /> 
                <img src="images/slider_nav.png" alt="Client Image 2" /> 
                <a><img src="#" alt="Client Image 3" />THE IMAGE WILL GO HERE IN PLACE OF THIS TEXT</a>
                <img src="#" alt="Client Image 4" />

        </span> <!-- END slider_background -->


    <div class="grid_2">
        <!-- "next slide" button --> 
        <a id="subrt_slidenav" class="next"></a> <!-- Affects the <li> for each image in slider_background -->
    </div>


        <span class="clear_left">
        <span id="slider_objective" class="grid_9 prefix_2">

            <h2>Objective:</h2>
            <p>Design a website that engages visitors with a fun, yet professional, tone while drawing interest in the array of products offered by Nspire and connecting visitors tot he people who make up the company through the use of social media.</p>

        </span> <!-- END slider_objective -->

        <span id="slider_cultivated" class="grid_11 prefix_1">

            <h2>What We Cultivated:</h2>
            <ul>
                <li>Fun & Professional tone by using strategic copywriting</li>
                <li>Latest blog posts widget that dynamically pulled posts</li>
                <li>Twitter integration showing the most recent tweet</li>
                <li>Salesforce CRM integration with forms</li>
                <li>Interactive product descriptions</li>
            </ul>

        </span> <!-- END slider_cultivated -->

        </span> <!-- END clear_left -->

    </div> <!-- END slides -->


</div> <!-- END clientbox -->

</div> <!-- END div container_24 -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>

And the Jquery I’m using for slider.js:

<script language="javascript">
$(function(){
  $("#slides").slides({
    next: 'next'
  });
});
</script>

Answer 1

Looks like I was able to use Jquery Cycle to do the nested slideshow. Thanks to Chrisdpratt for the help.