PDA

View Full Version : Changing the layout


leroytrolley
11-28-2011, 09:21 PM
Hi.

I am a complete newbie with PHP. Basically I have uploaded a wordpress plug-in that displays one large image and 9 thumbnails under the large pic. But I need the thumbnails to be next to the large image. I think I have found the part of the code that does the display functions, but how can I change the layout?
$selector = "gallery-{$instance}";

$output = '<div id="'.$selector.'" class="lil_wrapper gallery_id-'.$id.'" '.
(($width && $width!==$lg_options['width'])?'style="width:'.$width.'px;"':'').'>';
foreach ( $attachments as $att_id => $attachment ) {

$title= apply_filters('the_title', $attachment->post_title);

$s= wp_get_attachment_image_src($att_id, $size);

$output .= "\r\n". '<div class="lil-first-image" '.
(($height && $height!==$lg_options['height'])?'style="height:'.$height.'px;"':'').'>';

if ( 'none'!=$link ) {
$output .= '<a id="lil_a'.$instance.'" title="'.$title.'" href="'.($attachment->guid).'">';
}
$output .= '<img alt="'.$title.'" id="lil_img'.$instance.'" src="'.$s[0].'" />';

if ( 'none'!=$link ) {
$output .= '</a>';
}

$output .= '</div>';

break;
}

/* if only one image we do not want to show thumbnail */
if ( $attcount<2 ) {
$output .= '</div><!--/gallery-->';
return $output;
}

$output .= "\r\n<div class=\"lil_thumbnails\">";
foreach ( $attachments as $id => $attachment ) {
$linkto= wp_get_attachment_image_src($id, $size);
$linkfrom = wp_get_attachment_image_src($id, 'thumbnail');

$output .= "\r\n <a title=\"$attachment->post_title\" href=\"$attachment->guid\" onclick=\"{lil_change_img($instance, '$linkto[0]', '$attachment->guid'); return false;}\"><img src=\"$linkfrom[0]\" $style_thumb /></a>";
$i++;
}

$output .= "<div style=\"clear: both;\"></div>\n";
$output .= "\n</div><!-- /lil_thumbnails --></div>\r\n";

return $output;
}

function lil_gallery_css() {
global $lg_options;
echo '
<style type="text/css" title="">
.lil_wrapper { '.($lg_options['width']?('width:'.$lg_options['width'].'px;'):'').' display:block; clear: both; overflow:hidden;}'
.($lg_options['height']?(' .lil-first-image {height:'.$lg_options['height'].'px; overflow: hidden;}'):'').
' .lil_wrapper img {padding:1px !important; border:solid 1px #cfcfcf; margin:1px;}
.lil_thumbnails {margin-bottom: 12px; }
.lil_thumbnails a img {float:left; height:'.$lg_options['thumbnail_height'].'px;}

</style>