Page 1 of 1

How do I make these images clickable?

Posted: Sun Oct 23, 2011 5:16 pm
by highbias
Hi I have this slide show in a wordpress template. I want to make the images clickable so they load a _blank window to other sites. Any help would be much appreciated.

The Code:

Code: Select all

else if( count( $portfolio_images ) === 1 ) {

$portfolio_img_url = $portfolio_images[0];

$image_details = wp_get_attachment_image_src( eq_get_attachment_id_from_src( $portfolio_img_url ), 'full');
$image_full_width = $image_details[1];
$image_full_height = $image_details[2];

/* find the "desired height" of the current thumbnail, relative to the desired width */
$desired_height = floor( $image_full_height * ( $desired_width / $image_full_width ) );

// If the original width of the thumbnail doesn't match the width of the slider, resize it; otherwise, display it in original size
if( $image_full_width > $desired_width ) { 
?>

<img class="single-img" src="<?php echo get_template_directory_uri() . '/timthumb.php?src=' . $image_details[0]; ?>&h=<?php echo $desired_height; ?>&w=<?php echo $desired_width; ?>&q=90" alt="<?php the_title(); ?>" />

<?php 
} else { 
?>

<img class="single-img" src="<?php echo $portfolio_img_url; ?>" alt="<?php the_title(); ?>" />

<?php 
} 
}
else if ( count( $portfolio_images ) >= 1 ) {

?>

<!-- START .slider -->
<section class="slider">

<!-- START #slides -->
<div id="slides">

<!-- START .slides-container -->
<div class="slides-container">

<?php foreach ( $portfolio_images as $portfolio_img_url ) { ?>

<!-- START .slide -->
<figure class="slide">

<?php 
$image_details = wp_get_attachment_image_src( eq_get_attachment_id_from_src( $portfolio_img_url ), 'full');
$image_full_width = $image_details[1];
$image_full_height = $image_details[2];

/* find the "desired height" of the current thumbnail, relative to the desired width */
$desired_height = floor( $image_full_height * ( $desired_width / $image_full_width ) );

// If the original width of the thumbnail doesn't match the width of the slider, resize it; otherwise, display it in original size
if( $image_full_width > $desired_width ) { 
?>

<img width="<?php echo $desired_width; ?>" height="<?php echo $desired_height; ?>" class="slider-img" src="<?php echo get_template_directory_uri() . '/timthumb.php?src=' . $image_details[0]; ?>&h=<?php echo $desired_height; ?>&w=<?php echo $desired_width; ?>&q=90" alt="<?php the_title(); ?>" />

<?php } else { ?>

<img width="<?php echo $image_full_width; ?>" height="<?php echo $image_full_height; ?>" class="slider-img" src="<?php echo $portfolio_img_url; ?>" alt="<?php the_title(); ?>" />

<?php } ?>

</figure>
<!-- END .slide -->

<?php } // end foreach ?>

</div> 
<!-- END .slides_container -->
[ /syntax]

Re: How do I make these images clickable?

Posted: Sun Oct 23, 2011 5:58 pm
by Apollo
Way too much code in here... Please extract only the relevant part and put it between &#91;syntax=php]...&#91;/syntax] tags.

Re: How do I make these images clickable?

Posted: Mon Oct 24, 2011 12:13 am
by highbias
I edited it down a tad. Can you help?

Re: How do I make these images clickable?

Posted: Mon Oct 24, 2011 9:24 am
by egg82
<a href="" target="_blank"><img src=""></a>
or <img src="" onClick="window.open('yourpage.php', 'window name');">