MultiGame Page FancyBox

Hi Alex, sorry for the late reply. We could provide these games both as iframe and JS. And we have already embedded more of them on the same page without them interfering with each other. It's just that the games are loading simultaneously and the site gets really slow. So what we intend to have as a result is one single page we can embed in a Wordpress site where you can select games based on developer and game name. So for example we have 10 developers and each developer has games that can be played. You should be able to select those and when clicked play them. One by one. Do you think this can be done? Best Regards, Jey

by dixalex

HTML

<table>
    <tbody>
        <tr>
            <td class='devOneControl'>Developer One</td>
            <td class='devTwoControl'>Developer Two</td>
            <td class='devThreeControl'>Developer Three</td>
        </tr>
        <tr>
            <td class='devOne'>
                <ul>
                    <li><a href='#g1' class='fancy'>Game 01</a></li>
                    <li><a href='#g2' class='fancy'>Game 02</a></li>
                    <li><a href='#g3' class='fancy'>Game 03</a></li>
                    <li><a href='#g4' class='fancy'>Game 04</a></li>
                    <li><a href='#g5' class='fancy'>Game 05</a></li>
                    <li><a href='#g6' class='fancy'>Game 06</a></li>
                    <li><a href='#g7' class='fancy'>Game 07</a></li>
                </ul>
            </td>
            <td class='devTwo'>
                <ul>
                    <li><a href='#g1' class='fancy'>Game 01</a></li>
                    <li><a href='#g2' class='fancy'>Game 02</a></li>
                    <li><a href='#g3' class='fancy'>Game 03</a></li>
                    <li><a href='#g4' class='fancy'>Game 04</a></li>
                    <li><a href='#g5' class='fancy'>Game 05</a></li>
                    <li><a href='#g6' class='fancy'>Game 06</a></li>
                    <li><a href='#g7' class='fancy'>Game 07</a></li>
                </ul>
            </td>
            <td class='devThree'>
                <ul>
                    <li><a href='#g1' class='fancy'>Game 01</a></li>
                    <li><a href='#g2' class='fancy'>Game 02</a></li>
                    <li><a href='#g3' class='fancy'>Game 03</a></li>
                    <li><a href='#g4' class='fancy'>Game 04</a></li>
                    <li><a href='#g5' class='fancy'>Game 05</a></li>
                    <li><a href='#g6' class='fancy'>Game 06</a></li>
                    <li><a href='#g7' class='fancy'>Game 07</a></li>
                </ul>
            </td>
        </tr>
   ...

CSS

td {
    border: solid 1px #000;
    font-family: arial;
}

div.bufferImage {
    position: absolute;
    left: -9999px;
}

div.hideShell {
    display: none;
}

td.devOneControl,
td.devTwoControl,
td.devThreeControl {
    cursor: pointer;
    color: blue;
    background-color: #CCC;
}

td.devOneControl:hover,
td.devTwoControl:hover,
td.devThreeControl:hover {
    cursor: pointer;
    color: #FFF;
    background-color: #CCC;
}

ul {
    padding: 5px;
}

li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.devOne,
.devTwo,
.devThree {
    border: none;
}

.devOne ul,
.devTwo ul,
.devThree ul {
    display: none;
}

JavaScript

$('head').append('<link rel="stylesheet" type="text/css" href="https://s.rrimr.com/ui/fancybox/jquery.fancybox-1.3.4.css" media="screen" />')
$('.devOneControl').click(function() {
    if ($('.devOne ul').is(':visible')) {
        $('.devOne ul').slideUp();
    } else {
        $('.devOne ul').slideDown();
    }
    $('img').remove();
});
$('.devTwoControl').click(function() {
    if ($('.devTwo ul').is(':visible')) {
        $('.devTwo ul').slideUp();
    } else {
        $('.devTwo ul').slideDown();
    }
    $('img').remove();
});
$('.devThreeControl').click(function() {
    if ($('.devThree ul').is(':visible')) {
        $('.devThree ul').slideUp();
    } else {
        $('.devThree ul').slideDown();
    }
    $('img').remove();
});

//<![CDATA[
/*
 * FancyBox - jQuery Plugin
 * Simple and fancy lightbox alternative
 *
 * Examples and documentation at: http://fancybox.net
 *
 * Copyright (c) 2008 - 2010 Janis Skarnelis
 * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
 *
 * Version: 1.3.4 (11/11/2010)
 * Requires: jQuery v1.3+
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

;
(function($) {
    var tmp, loading, overlay, wrap, outer, content, close, title, nav_left, nav_right,

        selectedIndex = 0,
        selectedOpts = {},
        selectedArray = [],
        currentIndex = 0,
        currentOpts = {},
        currentArray = [],

        ajaxLoader = null,
        imgPreloader = new Image(),
        imgRegExp = /\.(jpg|gif|png|bmp|jpeg)(.*)?$/i,
        swfRegExp = /[^\.]\.(swf)\s*$/i,

        loadingTimer, loadingFrame = 1,

        titleHeight = 0,
        titleStr = '',
        start_pos, final_pos, busy = false,
        fx = $.extend($('<div/>')[0], {
            prop: 0
        }),

        //isIE6 = $.browser.msie &&...