Simplemodal: four times on a page leads to extra "next" or "previous" button [solved]

Question

NOTE: This has been edited from the original question with a solution. The original question was too long and had many errors in its thinking. For this I apologize.

We experienced a problem when each instance of the call to the simplemodal div class .basic-modal-content added an extra next or previous button in the modal windows at the end of a chain. We had two separate areas of modal content and they were joined at the modal window.

This was solved by having two div classes: .basic-modal-content-foo and .basic-modal-content-bar and having two instances of the script below on the page. All that is required is some CSS...

.basic-modal-content-foo {
    display: none;
}

.basic-modal-content-bar {
    display: none;
}

Here is the "foo" version of the script. Modify the 4 instances of the div class for the bar version.

<script>
$(function()
{
    $('a.foo').each(function()
    {
            $(this).click(function()
            {
                    $('#modal_' + this.id).modal({
                    overlayClose:true
                    });
            });
    });

    var num_divs = $('div.basic-modal-content-foo').length;

    $('div.basic-modal-content-foo').each(function(i)
    {
            /* if there is a previous div add a link to it
             */
            if (i > 0)
            {
                    /* get the ID for previous div
                     */
                    var prev_id = $(this).prev('.basic-modal-content-foo').attr('id');

                    /* add the link with click event
                     */

$('<a href="#" class="simplemodal-container-prev"></a>')
                            .click(function()
                            {
                                    $.modal.close();
                                    $('#' + prev_id).modal({overlayClose:true});
                            })
                            .appendTo($(this));
            }

            /* if there is a next div add a link to it
             */
            if (i < num_divs - 1)
            {
                    /* get the ID for next div
                     */
                    var next_id = $(this).next('.basic-modal-content-foo').attr('id');

                    /* add the link with click event
                     */
                    $('<a href="#" class="simplemodal-container-next"></a>')
                            .click(function()
                            {
                                    $.modal.close();
                                    $('#' + next_id).modal({overlayClose:true});
                            })
                            .appendTo($(this));
            }
    });

});

</script>

and some CSS to create an image for each window that shows the progress bar through the ul/li list.

The code to produce the above looks like this:

    <h1>Our HEADLINE</h1>
<div id="basic-modal">
<ul>
<li><a href="#" id="one">TEXT 1</a></li>
<li><a href="#" id="two">TEXT 2</a></li>
<li><a href="#" id="three">TEXT 3</a></li>
<li><a href="#" id="four">TEXT 4</a></li>
<li><a href="#" id="five">TEXT 5</a></li>
<li><a href="#" id="six">TEXT 6</a></li>
</ul>
</div>

<div class="basic-modal-content-foo" id="modal_one">
<img src="link to modal_one.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>

<div class="basic-modal-content-foo" id="modal_two">
<img src="link to modal_two.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>

<div> ... other divs 3 4 and 5 </div>

<div class="basic-modal-content-foo" id="modal_six">
<img src="link to modal_six.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>

And staying within the div class the additional text for the "bar" modal.

<div class="basic-modal-content-bar" id="modal_seven">
<img src="link to modal_seven.png" alt="portrait 1"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>

<div class="basic-modal-content-bar" id="modal_eight">
<img src="link to modal_eight.png" alt="portrait 2"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>

<div class="basic-modal-content-bar" id="modal_nine">
<img src="link to modal_nine.png" alt="portrait 3"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>
</div>

The ul/li structure works on the main page for the links. The modal windows allow one to browse through all of the six TEXTs. There is a common CSS style to the windows and a custom image in each of the modal windows derived from the "#modal_[number] img" CSS in the form of a progress bar.

Here is the relevant code from one of the three biographic links. You will note that the biographic links each have to have all three in this current configuration.

<h4>Our HEADLINE</h4>
<div id="basic-modal">
<div class="bottom-widget-text">
<img src="picture" alt="not relevant to the simplemodal problem"/>
<p>Read about person NUMBER 1 by clicking on the following link:
<a href="#" class="bar" id="seven" >Expand</a>
</p>
</div>
</div>

Similarly the "biographies" open up from a different area of the page. The modal windows allow one to browse through all three of the BIOs. The bios use the SAME CSS style windows and a custom image in each of the modal windows derived from the "#modal_[number] img" CSS in the form of a portrait.

Everything is working well.

One question left: I have two instances of the JS on the page. Can this be combined into one script?

Thanks in advance.

DDF

Answer 1

One question left: I have two instances of the JS on the page. Can this be combined into one script?

I don't see why not. Have you tried it?