Sie sind auf Seite 1von 3

Step 1 - Remove CSS related to hover overs Appearance >> Editor >> Edit Style.

css >> Under section 2.7 Portfolio, replace entire section with the follow CSS (you may use custom CSS to do so or remember to backup your previous CSS)
/* 2.7 Portfolio */#portfolio { padding: 20px 0; border-top: 1px solid #C2C2BE; border-bottom: 1px solid #DFDDDC; border-top-color:rgba(0,0,0,.2); border-bottom-color: rgba(0,0,0,.1); overflow: hidden; }.fullwidth #portfolio { border:none; padding:0; }

ol.portfolio, ol.dribbbles { list-style-type:none; margin:0; }ol.portfolio li, ol.dribbbles li { margin: 10px; width: 220px; float: left; }

.dribbbles li{font-size:15px;position:relative;width:220px;padding:0;margin:0 0 1.5em 0;}.dribbbles .dribbble{font-family:"Helvetica Nueue", Helvetica, Arial, sansserif;position:relative;clear:left;overflow:hidden;padding:0 0 10px 0;background:url(images/dribbblesprite.png) no-repeat -10px -480px;}.dribbbles .dribbble-shot{padding:10px;background:url(images/dribbblesprite.png) norepeat -10px -330px;}.dribbbles .dribbble-link{position:relative;z-index:2;}.dribbbles img{margin:0;width:200px;height:auto;}

.dribbbles strong{display:block;font-weight:bold;font-size:1.4em;line-height:1.2em;color:#126661; display:none;} .dribbbles .dim{font-weight:bold;color:#666;}.dribbbles em{position: absolute;bottom:11px;left:10px;fontsize:1em;line-height:1em;font-weight:normal;font-style:normal;display:none;}.dribbbles .dribbbleimg{width:200px;height:150px;overflow:hidden;}

Step 2 - Add custom link field in theme-options.php This will enable your portfolio items to be able to link to any url when clicked. Appearance >> Editor >> Edit theme-options.php >> Add the following code (in bold) before //Add extra metaboxes through function (the code is located all the way down)
$woo_metaboxes[] = array ( "name" => "link","std" => "","label" => "Custom Link URL", "type" => "text","desc" => "This is the custom link url for Portfolio Images.");

// Add extra metaboxes through functionif ( function_exists("woo_metaboxes_add") )$woo_metaboxes = woo_metaboxes_add($woo_metaboxes);

if ( get_option('woo_custom_template') != $woo_metaboxes) update_option('woo_custom_template', $woo_metaboxes);

Step 3 - Edit Header.php & tempalte-portfolio.php to trigger lightbox This step will make sure any portfolio items when clicked will trigger lightbox. Appearance >> Editor >> Edit header.php >> Replace content of <div class="portfolioimg dribbble-img"> with: (the code is located all the way down)
<div class="portfolio-img dribbble-img"> <a href="<?php echo get_post_meta($id, "link", true); ?>" class="dribble-link" rel="lightbox"><?php woo_image('key=portfolioimage&width=200&height=150&link=img'); ?> </a> <a href="<?php the_permalink(); ?>" class="dribbble-over"><strong><?php the_title(); ?></strong> <!-- <span class="dim">Your Player Name</span> --><em><?php the_time( get_option( 'date_format' ) ); ?></em> </a> </div>

Appearance >> Editor >> Edit template-portfolio.php >> Replace content of <div class="portfolio-img dribbble-img"> with: (the code is located all the way down)
<div class="portfolio-img dribbble-img"> <a href="<?php echo get_post_meta($id, "link", true); ?>" class="dribble-link" rel="lightbox"><?php woo_image('key=portfolioimage&width=200&height=150&link=img'); ?> </a> <!-- <span class="dim">Your Player Name</span> --><em><?php the_time( get_option( 'date_format' ) ); ?></em> </div>

Step 4 Finish. Putting the pieces together Its done! Now in order to enjoy your newly integrated lightbox. Under every portfolio item, you have to custom link the item to the url of the image uploaded. Its manual work but it works!

Das könnte Ihnen auch gefallen