remove toggle mode and close

Discussion in 'PHP' started by tin2mon, Sep 25, 2010.

0
  1. #1
    Hi,

    I have very low knowledge about php yet and only started to learn by customizing existing code. But I'm stuck with the next task I gave myself.

    The existing code is toggling the images from thumb to full size. Like and on/off button for the images. But I would like to change it so there is only on image open at a time. you click on a thumbnail and the image opens and if you click on another thumbnail it closes the previous one and opens the clicked one.

    I apologize as I can imagine this is quite annoying if total newbies ask this kind of stupid questions.

    Thanks in advance
    L

    Here is the code:

    function createExhibit()
    {
    $OBJ =& get_instance();
    global $rs, $exhibit;

    $pages = $OBJ->db->fetchArray("SELECT *
    FROM ".PX."media, ".PX."objects_prefs, ".PX."objects
    WHERE media_ref_id = '$rs[id]'
    AND obj_ref_type = 'exhibit'
    AND obj_ref_type = media_obj_type
    AND id = '$rs[id]'
    ORDER BY media_order ASC, media_id ASC");

    // ** DON'T FORGET THE TEXT ** //
    $s = $rs['content'];
    $s .= "\n<div class='cl'><!-- --></div>\n";

    if (!$pages) return $s;

    $thumb = $rs['thumbs'] + 20;

    $i = 1; $j = 0; $a = '';
    foreach ($pages as $go)
    {
    $title = ($go['media_title'] == '') ? '&nbsp;' : $go['media_title'];
    $caption = ($go['media_caption'] == '') ? '&nbsp;' : $go['media_caption'];

    if ($go['break'] != 0)
    {
    if ($i == $go['break'])
    {
    $i = 0;
    $break = "<div style='clear:left;'><!-- --></div>";
    }
    else
    {
    $break = '';
    }
    }
    else
    {
    $break = '';
    }

    // images
    $a .= "<div class='grow' id='img$j' style='float: left;'>\n";
    $a .= "<div class='thumb'>\n";
    $a .= "<div class='thumb-it'>\n";
    $a .= "<a href='#' class='thumb-img' onclick=\"toggleImg($j,$go[media_x],$go[media_y],$go[thumbs]);return false;\"><img src='" . BASEURL . GIMGS . "/th-$go[media_file]' alt='$go[media_file]' title='$title' /></a>\n";
    $a .= "</div>\n";

    $a .= "</div>\n";
    $a .= "<strong>&nbsp;{$title}&nbsp;</strong>\n<em>&nbsp;{$caption}&nbsp;</em>\n";
    $a .= "</div>\n\n";

    $i++; $j++;
    }

    // images
    $s .= "<!--[if lte IE 6]><style type='text/css'>.thumb-img { #top: -50%; }</style><![endif]-->\n\n";
    $s .= "<div id='img-container'>\n";
    $s .= $a;
    $s .= "</div>\n";

    return $s;
    }


    function dynamicCSS()
    {
    global $rs;

    // for .thumb-it we need #top: -50%; for IE...but it doesn't work.

    $thumb = $rs['thumbs'] + 20;

    return ".grow { float:left; }
    .thumb { padding:0 5px 0 0; text-align:left; height: {$thumb}px; #position: relative; overflow: hidden; width: {$thumb}px; }

    .grow strong { margin-top: 3px; text-align: left; font-weight: normal; display: none; }
    .grow em { font-style: normal; display: none; text-align: left; }

    .thumb-it { #position: absolute; _top: 50%; display: table-cell; vertical-align: middle; text-align: left; }
    .thumb-img { #position: relative; width: {$thumb}px; display:block; }";
    }


    ?>
     
    tin2mon, Sep 25, 2010 IP