WordPress.org

Ready to get started?Download WordPress

Forums

Fancybox Gallery in Template (2 posts)

  1. lipernot
    Member
    Posted 1 year ago #

    Hello. Sorry if I do not understand. My native language is Spanish.

    I want to add a gallery of 3 images horizontally in the file "index.php" from my template. I want you to see below the header and before the content.

    I tried it, I put the fancybox script in "header.php" and then put the index images in a div.

    But everything is distorted. Charging normally only gallery with fancybox, but the rest of the theme and content is damaged.

    Please help me with a solution to achieve this.

    I do not want a plugin because I want to add that gallery only in the "index.php".

    Code added in "header.php":

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/lib/jquery-1.8.2.min.js"></script>
    
    	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
    
    	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
    	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
    
    	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    
    	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
    
    	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
    
    	<script type="text/javascript">
    		$(document).ready(function() {
    			/*
    			 *  Different effects
    			 */
    
    			// Set custom style, close if clicked, change title type and overlay color
    			$(".fancybox-effects-a").fancybox({
    				wrapCSS    : 'fancybox-custom',
    				closeClick : true,
    
    				openEffect : 'none',
    
    				helpers : {
    					title : {
    						type : 'inside'
    					},
    					overlay : {
    						css : {
    							'background' : 'rgba(238,238,238,0.85)'
    						}
    					}
    				}
    			});
    		});
    	</script>
    	<style type="text/css">
    		.fancybox-custom .fancybox-skin {
    			box-shadow: 0 0 50px #222;
    		}
    	</style>

    Code in "index.php":

    <?php get_header(); ?> 
    
    <a class="fancybox-effects-a" href="<?php bloginfo('template_directory'); ?>/fancybox/demo/1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="<?php bloginfo('template_directory'); ?>/fancybox/demo/1_s.jpg" alt="" /></a>
    
    		<a class="fancybox-effects-a" href="<?php bloginfo('template_directory'); ?>/fancybox/demo/2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="<?php bloginfo('template_directory'); ?>/fancybox/demo/2_s.jpg" alt="" /></a>
    
    		<a class="fancybox-effects-a" href="<?php bloginfo('template_directory'); ?>/fancybox/demo/3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="<?php bloginfo('template_directory'); ?>/fancybox/demo/3_s.jpg" alt="" /></a>
    
    		<a class="fancybox-effects-a" href="<?php bloginfo('template_directory'); ?>/fancybox/demo/4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="<?php bloginfo('template_directory'); ?>/fancybox/demo/4_s.jpg" alt="" /></a> 
    
            <div class="span-24" id="contentwrap">
                <div class="span-16">
                    <div id="content">
                    <?php if(is_home()) { include (TEMPLATEPATH . '/featured.php'); } ?>
                        <?php if (have_posts()) : ?>
                            <?php while (have_posts()) : the_post(); ?> 
    
                            <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
                                <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(260,200), array("class" => "alignleft post_thumbnail")); } ?>
                                <h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                                <div class="postdate"><img src="<?php bloginfo('template_url'); ?>/images/date.png" /> Publicado: <?php the_time('j F, Y') ?> <?php if (current_user_can('edit_post', $post->ID)) { ?> <img src="<?php bloginfo('template_url'); ?>/images/edit.png" /> <?php edit_post_link('Editar', '', ''); } ?></div> 
    
                                <div class="entry">
                                    <?php the_content('<strong>Leer m&aacute;s &raquo;</strong>'); ?>
                                </div>
                            </div><!--/post-<?php the_ID(); ?>--> 
    
                    <?php endwhile; ?>
                    <div class="navigation">
                        <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } else { ?>
                        <div class="alignleft"><?php next_posts_link('&laquo; Entradas anteriores') ?></div>
                        <div class="alignright"><?php previous_posts_link('Entradas recientes &raquo;') ?></div>
                        <?php } ?>
                    </div>
                    <?php else : ?>
                        <h2 class="center">No se encuentra</h2>
                        <p class="center">Lo sentimos, pero usted est&aacute; buscando algo que no est&aacute; aqu&iacute;.</p>
                        <?php get_search_form(); ?> 
    
                    <?php endif; ?>
                    </div>
                </div> 
    
            <?php get_sidebars(); ?>
        </div>
    <?php get_footer(); ?>
  2. lipernot
    Member
    Posted 1 year ago #

    Please one reply.

Topic Closed

This topic has been closed to new replies.

About this Topic