Te pongo el código de la plantilla original, pero añadiéndole un ítem más al menú, que será otra galería, ya que mi código es muy largo.
<div id="bf_page_menu" class="bf_menu" >
<h1 class="title">Vittori's<span>trattoria italiana</span></h1>
<ul>
<li><a href="#" data-content="home"><span class="bf_hover"></span><span>Welcome</span></a></li>
<li><a href="#" data-content="about"><span class="bf_hover"></span><span>About us</span></a></li>
<li><a href="#" data-content="menu"><span class="bf_hover"></span><span>Our Menu</span></a></li>
<li><a href="#" data-content="Galeria"><span class="bf_hover"></span><span>Otra Galeria</span></a></li>
<li><a href="#" data-content="visit"><span class="bf_hover"></span><span>Visit us</span></a></li>
</ul>
</div>
<div class="bf_page" id="home" style="display:block;">
...
</div>
<div class="bf_page" id="about">
...
</div>
<div class="bf_page" id="menu">
<div class="bf_content_text">
<h2>Our Menu</h2>
<p>Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>
<ul id="bf_dishes">
<li><a href="#"><img src="images/thumbs/1.jpg" alt="thumb1"/></a></li>
<li><a href="#"><img src="images/thumbs/2.jpg" alt="thumb2"/></a></li>
<li><a href="#"><img src="images/thumbs/3.jpg" alt="thumb3"/></a></li>
<li><a href="#"><img src="images/thumbs/4.jpg" alt="thumb4"/></a></li>
<li><a href="#"><img src="images/thumbs/5.jpg" alt="thumb5"/></a></li>
<li><a href="#"><img src="images/thumbs/6.jpg" alt="thumb6"/></a></li>
</ul>
</div>
<div id="bf_gallery" class="bf_gallery">
<a id="bf_close" href="#" class="bf_close"></a>
<div class="bf_nav">
<a id="bf_prev" href="#" class="bf_prev"></a>
<a id="bf_next" href="#" class="bf_next"></a>
</div>
<div class="bf_gallery_wrapper">
<div class="bf_gallery_item">
<div class="bf_heading"><h2>Pizza Rustica</h2></div>
<div class="bf_desc">
<p>Fresh ingredients and authentic flavours</p>
</div>
<img src="images/foreground/1.jpg" alt="image1" data-bgimg="images/background/1.jpg" />
</div>
<div class="bf_gallery_item">
<div class="bf_heading"><h2>Pizza Quattro Stagioni</h2></div>
<div class="bf_desc">
<p>Originality meets tradition</p>
</div>
<img src="images/foreground/2.jpg" alt="image1" data-bgimg="images/background/2.jpg" />
</div>
<div class="bf_gallery_item">
<div class="bf_heading"><h2>Rucolini</h2></div>
<div class="bf_desc">
<p>Dive into the balance of taste</p>
</div>
<img src="images/foreground/3.jpg" alt="image1" data-bgimg="images/background/3.jpg" />
</div>
<div class="bf_gallery_item">
<div class="bf_heading"><h2>Salsicce Boscaiola</h2></div>
<div class="bf_desc">
<p>The right intensity</p>
</div>
<img src="images/foreground/4.jpg" alt="image1" data-bgimg="images/background/4.jpg" />
</div>
<div class="bf_gallery_item">
<div class="bf_heading"><h2>Tortelloni Alla Zucca</h2></div>
<div class="bf_desc">
<p>Incredibly tasty perfection</p>
</div>
<img src="images/foreground/5.jpg" alt="image1" data-bgimg="images/background/5.jpg" />
</div>
<div class="bf_gallery_item">
<div class="bf_heading"><h2>Calamaretti Fritti</h2></div>
<div class="bf_desc">
<p>Combine chunky and soft</p>
</div>
<img src="images/foreground/6.jpg" alt="image1" data-bgimg="images/background/6.jpg" />
</div>
</div>
</div>
</div>
//Esta nueva galeria es igual que la de antes pero las imágenes van al revés (aunque yo en mi web lo he probado con otras, coge las imágenes de la primera galería creada)
<div class="bf_page" id="Galeria">
<div class="bf_content_text">
<h2>Our Menu</h2>
<p>Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>
<ul id="bf_dishes">
<li><a href="#"><img src="images/thumbs/6.jpg" alt="thumb1"/></a></li>
<li><a href="#"><img src="images/thumbs/5.jpg" alt="thumb2"/></a></li>
<li><a href="#"><img src="images/thumbs/4.jpg" alt="thumb3"/></a></li>
<li><a href="#"><img src="images/thumbs/3.jpg" alt="thumb4"/></a></li>
<li><a href="#"><img src="images/thumbs/2.jpg" alt="thumb5"/></a></li>
<li><a href="#"><img src="images/thumbs/1.jpg" alt="thumb6"/></a></li>
</ul>
</div>
<div id="bf_gallery" class="bf_gallery">
<a id="bf_close" href="#" class="bf_close"></a>
<div class="bf_nav">
<a id="bf_prev" href="#" class="bf_prev"></a>
<a id="bf_next" href="#" class="bf_next"></a>
</div>
<div class="bf_gallery_wrapper">
<div class="bf_gallery_item">
<div class="bf_heading"><h2>Pizza Rustica</h2></div>
<div class="bf_desc">
<p>Fresh ingredients and authentic flavours</p>
</div>
<img src="images/foreground/6.jpg" alt="image1" data-bgimg="images/background/6.jpg" />
</div>
<div class="bf_gallery_item">
<div class="bf_heading"><h2>Pizza Quattro Stagioni</h2></div>
<div class="bf_desc">
<p>Originality meets tradition</p>
</div>
<img src="images/foreground/5.jpg" alt="image1" data-bgimg="images/background/5.jpg" />
</div>
<div class="bf_gallery_item">
<div class="bf_heading"><h2>Rucolini</h2></div>
<div class="bf_desc">
<p>Dive into the balance of taste</p>
</div>
<img src="images/foreground/4.jpg" alt="image1" data-bgimg="images/background/4.jpg" />
</div>
<div class="bf_gallery_item">
<div class="bf_heading"><h2>Salsicce Boscaiola</h2></div>
<div class="bf_desc">
<p>The right intensity</p>
</div>
<img src="images/foreground/3.jpg" alt="image1" data-bgimg="images/background/3.jpg" />
</div>
<div class="bf_gallery_item">
<div class="bf_heading"><h2>Tortelloni Alla Zucca</h2></div>
<div class="bf_desc">
<p>Incredibly tasty perfection</p>
</div>
<img src="images/foreground/2.jpg" alt="image1" data-bgimg="images/background/2.jpg" />
</div>
<div class="bf_gallery_item">
<div class="bf_heading"><h2>Calamaretti Fritti</h2></div>
<div class="bf_desc">
<p>Combine chunky and soft</p>
</div>
<img src="images/foreground/1.jpg" alt="image1" data-bgimg="images/background/1.jpg" />
</div>
</div>
</div>
</div>
No sé si así te vas a aclarar, en la demo del enlace que pasé estará más claro (http://tympanus.net/Development/RestaurantTemplate/), se puede apreciar como funciona la galería de imágenes.
Lo único que he hecho ha sido añadir un ítem más al menú, que será una nueva galería de imágenes. Las miniaturas salen de manera correcta, pero al hacer click sobre ellas, coge las imágenes de la galería que ya tenía creada, por mucho que le indico la carpeta donde debe cogerlas (además de este problema no me aparecen las flechas ni el botón de cerrar, así como debería desaparecer la sección donde va el contenido de cada ítem del menu, es un recuadro negro algo transparente). No sé si habrá que hacer algún cambio en el fichero jquery.template, pero no tengo ni idea de donde.
Gracias.
