WordPress.org

Ready to get started?Download WordPress

Forums

Gallery Full Screen Image function (1 post)

  1. SerenadeWebDesign
    Member
    Posted 1 year ago #

    I'm using a template and want a certain function to open up the images in full screen.

    Here is the template example with a grid gallery: http://www.templatemonster.com/demo/41582.html once you click on the thumbnail it opens up the image larger and the ability to cycle through the images. However I want to do this with the slideshow gallery type like this one: http://www.templatemonster.com/demo/41582.html so on this slideshow gallery type page I want the ability to open the images in the same way as the grid gallery type. Here is the code:

    <!--BEGIN #primary .hfeed-->
    	<div id="primary" class="hfeed">
    
    		<?php if( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    			<!--BEGIN .hentry -->
    			<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">				
    
            <div class="two_third">
    
    					<?php // get the media elements
    
    				$img_url = wp_get_attachment_url( $thumb,'full'); //get img URL
    				$image = aq_resize( $img_url, 460, 290, true ); //resize & crop img
                $mediaType = get_post_meta($post->ID, 'tz_portfolio_type', true);
    
    						switch( $mediaType ) {
    							case "Image":
    								tz_image($post->ID, 'portfolio-main');
    								break;
    
    							case "Slideshow":
    								tz_gallery($post->ID, 'portfolio-main');
    								break;
    
    							case "Grid Gallery":
    								tz_grid_gallery($post->ID, 'portfolio-main');
    								break;
    
    							case "Video":
    								$embed = get_post_meta($post->ID, 'tz_portfolio_embed_code', true);
    								echo "<div class='video-holder'>";
    								echo stripslashes(htmlspecialchars_decode($embed));
    								echo "</div>";
    								break;
    
    							case "Audio":
    								tz_audio($post->ID);
    								break;
    
    							default:
    								break;
    						}
    					?>

    And some more code that seems to work for the thumbnail functionality:

    <!-- BEGIN Gallery -->
    <div id="gallery" class="two_columns">
      <ul class="portfolio">
        <?php
          $i=1;
          if ( have_posts() ) while ( have_posts() ) : the_post();
          if(($i%2) == 0){ $addclass = "nomargin";	}
        ?>
    
          <li class="<?php echo $addclass; ?>">
    				<?php
    				$thumb = get_post_thumbnail_id();
    				$img_url = wp_get_attachment_url( $thumb,'full'); //get img URL
    				$image = aq_resize( $img_url, 460, 290, true ); //resize & crop img
    
    				//mediaType init
    				$mediaType = get_post_meta($post->ID, 'tz_portfolio_type', true);
    
    			 //check thumb and media type
    				if(has_post_thumbnail($post->ID) && $mediaType != 'Video' && $mediaType != 'Audio'){ 
    
    					//Disable overlay_gallery if we have Image post
    					$prettyType = 0;
    
    					if($mediaType != 'Image') { 
    
    						$prettyType = "prettyPhoto[gallery".$i."]";
    
    					} else { 
    
    						$prettyType = 'prettyPhoto';
    
    					} ?>
    
            <span class="image-border"><a class="image-wrap" href="<?php echo $img_url;?>" rel="<?php echo $prettyType; ?>" title="<?php the_title();?>"><img src="<?php echo $image ?>" alt="<?php the_title(); ?>" /><span class="zoom-icon"></span></a></span>
    
    				<?php
    					$thumbid = 0;
    					$thumbid = get_post_thumbnail_id($post->ID);
    
    					$images = get_children( array(
    						'orderby' => 'menu_order',
    						'order' => 'ASC',
                'post_type' => 'attachment',
                'post_parent' => $post->ID,
                'post_mime_type' => 'image',
                'post_status' => null,
                'numberposts' => -1
    					) );
    						/* $images is now a object that contains all images (related to post id 1) and their information ordered like the gallery interface. */
    						if ( $images ) { 
    
    							//looping through the images
    							foreach ( $images as $attachment_id => $attachment ) {
    
    							 if( $attachment->ID == $thumbid ) continue;
    							?>
    								<?php
    								$image_attributes = wp_get_attachment_image_src( $attachment_id, 'full' ); // returns an array
    								$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    								$image_title = $attachment->post_title;
    								?>
    
    								<a href="<?php echo $image_attributes[0]; ?>" title="<?php the_title(); ?>" rel="<?php echo $prettyType; ?>" alt="<?php echo $alt; ?>" style="display:none;"><img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo $alt; ?>"/></a>
    
    							<?php
    							}
    					}
    
    				?>
    
    				<?php }else { ?>

Topic Closed

This topic has been closed to new replies.

About this Topic

  • RSS feed for this topic
  • Started 1 year ago by SerenadeWebDesign
  • This topic is not resolved
  • WordPress version: 3.5.1