Question

I’m using a Simplemodal plugin that I got from here: http://www.ericmmartin.com/projects/simplemodal-demos/

I was successful in putting it one of the links on this page: http://tonangi.com/portfolio_test.html (click the View slideshow link).
I am loading up an iframe. I want to do that 2 more times on the same page but I can’t figure out how…

I simply want to load new content based on on the link – so there you see 3 companies, and I should be able to load up new content whenever someone clicks the appropriate link.

Can someone help me out?

Answer 1

Okay, so there are multiple ways you can achieve this and I will show you several.

    <br><br>
    <a href="#" id="link2">Verizon Support</a>
    <div class="link2" style="display:none"><iframe src="http://www.verizon.com/support" frameborder="0" height="700" scrolling="no" width="800"></iframe></div>

    <br><br>
    <a href="#" id="link3">Google ME</a>
    <div class="link3" style="display:none"><iframe src="http://www.google.com/" frameborder="0" height="600" scrolling="no" width="800"></iframe></div>

    <br><br>
    <a href="#" id="link4">I Load HTML</a>

    <br><br>
    <a href="#" class="link5">I load same as </a> &nbsp; &nbsp; &nbsp;
    <a href="#" class="link5">what i load which is</a> &nbsp; &nbsp; &nbsp;    
    <a href="#" class="link5">same thing again as me! </a>  


<script type="text/javascript">
    $(document).ready(function() {

        $('#link2').click(function(){ $('.link2').modal(); }); //When you click on object with ID "link2", content from object with Class "link2" will be loaded into modal.

        $('#link3').click(function(){ $('.link3').modal(); }); //When you click on object with ID "link3", content from object with Class "link3" will be loaded into modal.

        $('#link4').click(function(){ $.modal('<iframe src="http://www.firefox.com/" frameborder="0" height="600" scrolling="no" width="800"></iframe>'); }); //When you click on object with ID "link4", pre-specified HTML content in the "modal" function will be loaded into modal.

        $('.link5').click(function(){ $.modal('<iframe src="http://www.woot.com/" frameborder="0" height="600" scrolling="no" width="800"></iframe>'); }); //When you click on any object with Class "link5", woot page will be loaded.

    });
</script>

You can simply put this block of code within your page where you currently have a modal link and see it work.

Read comments from jQuery section to understand what is happening. Keep in mind, ID must be unique, meaning ALL object ID’s on your entire page must be unique for JS to work properly. If you need multiple instances of same behavior, use CLASS. As shown above in example as “Class5” links.

Hope this will be sufficient enough to do what you were trying to do.