Foros del Web » Programando para Internet » Jquery »

Problema con una plantilla jquery

 Estas en el tema de Problema con una plantilla jquery en el foro de Jquery en Foros del Web. Buenas tardes, estoy haciendo una página web con una plantilla que encontré en, [URL="http://tympanus.net/codrops/2011/04/21/restaurant-template/"]http://tympanus.net/codrops/2011/04/21/restaurant-template/[/URL]. He podido adaptarla a lo que yo necesito, pero lo que ...
  #1 (permalink)  
Antiguo 28/05/2012, 10:05
 
Fecha de Ingreso: julio-2008
Mensajes: 9
Antigüedad: 15 años, 9 meses
Puntos: 0
Problema con una plantilla jquery
Buenas tardes, estoy haciendo una página web con una plantilla que encontré en, [URL="http://tympanus.net/codrops/2011/04/21/restaurant-template/"]http://tympanus.net/codrops/2011/04/21/restaurant-template/[/URL].
He podido adaptarla a lo que yo necesito, pero lo que no he podido hacer es crear otra galería de imágenes en otro ítem del menú, ya que al clickar en las miniaturas, coge las imágenes de la primera galería (a pesar de especificar la ruta de donde tiene que coger las imágenes), no aparecen las flechas ni el botón de cierre y el recuadro donde sale el contenido de cada apartado no desaparece.
He intentado solucionarlo de muchas maneras pero no hay medio. Estoy desesperada.
Muchas gracias de antemano.
  #2 (permalink)  
Antiguo 28/05/2012, 10:57
 
Fecha de Ingreso: marzo-2007
Mensajes: 82
Antigüedad: 17 años, 1 mes
Puntos: 21
Respuesta: Problema con una plantilla jquery
Mostrarnos un poco de codigo te seria de gran ayuda y si pudieras extender un poco la explicacion del problema tambien te ayudaria a ti y a nosotros.
Saludos
__________________
Hazle un favor a tu cerebro y juega Ajedrez online
Chess online
  #3 (permalink)  
Antiguo 28/05/2012, 11:56
 
Fecha de Ingreso: julio-2008
Mensajes: 9
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Problema con una plantilla jquery
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.
  #4 (permalink)  
Antiguo 28/05/2012, 13:14
 
Fecha de Ingreso: marzo-2007
Mensajes: 82
Antigüedad: 17 años, 1 mes
Puntos: 21
Respuesta: Problema con una plantilla jquery
ye ye , he dicho un poco de codigo , jeje, mira segun lo que entiendo es que tenes que añadir un item a la seccion de menu.
en el codigo de abajo lo hice añadiendo el item 1 al final de todos los items

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <title>Restaurant Website and Gallery Template with jQuery and Google Maps</title>
  5.         <meta charset=utf-8>
  6.         <meta name="description" content="Restaurant Website and Gallery Template with jQuery and Google Maps" />
  7.         <meta name="keywords" content="jquery, gallery, images, css3, html5, photography, website, template, google maps, sliding, background"/>
  8.         <link rel="shortcut icon" href="http://tympanus.net/favicon.ico" type="image/x-icon"/>
  9.         <link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/RestaurantTemplate/css/style.css" />
  10.         <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
  11.         <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light' rel='stylesheet' type='text/css'>
  12.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  13.         <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
  14.  
  15.             
  16.     </head>
  17.     <body>
  18.         <div id="map"></div>
  19.         <div id="bf_container" class="bf_container">
  20.             <div id="bf_background" class="bf_background">
  21.                 <img src="http://tympanus.net/Development/RestaurantTemplate/images/background/default.jpg" alt="image1" style="display:none;"/>
  22.                 <div class="bf_overlay"></div>
  23.             </div>
  24.             <div id="bf_page_menu" class="bf_menu" >
  25.                 <h1 class="title">Vittori's<span>trattoria italiana</span></h1>
  26.                 <ul>
  27.                     <li><a href="#" data-content="home"><span class="bf_hover"></span><span>Welcome</span></a></li>
  28.                     <li><a href="#" data-content="about"><span class="bf_hover"></span><span>About us</span></a></li>
  29.                     <li><a href="#" data-content="menu"><span class="bf_hover"></span><span>Our Menu</span></a></li>
  30.                     <li><a href="#" data-content="visit"><span class="bf_hover"></span><span>Visit us</span></a></li>
  31.                 </ul>
  32.             </div>
  33.             <div class="bf_page" id="home" style="display:block;">
  34.                 <div class="bf_content_text">
  35.                     <h2>Welcome</h2>
  36.                     <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way.</p>
  37.                 </div>
  38.             </div>
  39.             <div class="bf_page" id="about">
  40.                 <div class="bf_content_text">
  41.                     <h2>About us</h2>
  42.                     <p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
  43.                     <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
  44.                 </div>
  45.             </div>
  46.             <div class="bf_page" id="menu">
  47.                 <div class="bf_content_text">
  48.                     <h2>Our Menu</h2>
  49.                     <p>Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>
  50.                     <ul id="bf_dishes">
  51.                         <li><a href="#"><img src="http://tympanus.net/Development/RestaurantTemplate/images/thumbs/1.jpg" alt="thumb1"/></a></li>
  52.                         <li><a href="#"><img src="http://tympanus.net/Development/RestaurantTemplate/images/thumbs/2.jpg" alt="thumb2"/></a></li>
  53.                         <li><a href="#"><img src="http://tympanus.net/Development/RestaurantTemplate/images/thumbs/3.jpg" alt="thumb3"/></a></li>
  54.                         <li><a href="#"><img src="http://tympanus.net/Development/RestaurantTemplate/images/thumbs/4.jpg" alt="thumb4"/></a></li>
  55.                         <li><a href="#"><img src="http://tympanus.net/Development/RestaurantTemplate/images/thumbs/5.jpg" alt="thumb5"/></a></li>
  56.                         <li><a href="#"><img src="http://tympanus.net/Development/RestaurantTemplate/images/thumbs/6.jpg" alt="thumb6"/></a></li>
  57.                         <li><a href="#"><img src="http://tympanus.net/Development/RestaurantTemplate/images/thumbs/1.jpg" alt="thumb6"/></a></li>
  58.                     </ul>
  59.                 </div>
  60.                 <div id="bf_gallery" class="bf_gallery">
  61.                     <a id="bf_close" href="#" class="bf_close"></a>
  62.                     <div class="bf_nav">
  63.                         <a id="bf_prev" href="#" class="bf_prev"></a>
  64.                         <a id="bf_next" href="#" class="bf_next"></a>
  65.                     </div>
  66.                     <div class="bf_gallery_wrapper">
  67.                         <div class="bf_gallery_item">
  68.                             <div class="bf_heading"><h2>Pizza Rustica</h2></div>
  69.                             <div class="bf_desc">
  70.                                 <p>Fresh ingredients and authentic flavours</p>
  71.                             </div>
  72.                             <img src="http://tympanus.net/Development/RestaurantTemplate/images/foreground/1.jpg" alt="image1" data-bgimg="http://tympanus.net/Development/RestaurantTemplate/images/background/1.jpg" />
  73.                         </div>
  74.                         <div class="bf_gallery_item">
  75.                             <div class="bf_heading"><h2>Pizza Quattro Stagioni</h2></div>
  76.                             <div class="bf_desc">
  77.                                 <p>Originality meets tradition</p>
  78.                             </div>
  79.                             <img src="http://tympanus.net/Development/RestaurantTemplate/images/foreground/2.jpg" alt="image1" data-bgimg="http://tympanus.net/Development/RestaurantTemplate/images/background/2.jpg" />
  80.                         </div>
  81.                         <div class="bf_gallery_item">
  82.                             <div class="bf_heading"><h2>Rucolini</h2></div>
  83.                             <div class="bf_desc">
  84.                                 <p>Dive into the balance of taste</p>
  85.                             </div>
  86.                             <img src="http://tympanus.net/Development/RestaurantTemplate/images/foreground/3.jpg" alt="image1" data-bgimg="http://tympanus.net/Development/RestaurantTemplate/images/background/3.jpg" />
  87.                         </div>
  88.                         <div class="bf_gallery_item">
  89.                             <div class="bf_heading"><h2>Salsicce Boscaiola</h2></div>
  90.                             <div class="bf_desc">
  91.                                 <p>The right intensity</p>
  92.                             </div>
  93.                             <img src="http://tympanus.net/Development/RestaurantTemplate/images/foreground/4.jpg" alt="image1" data-bgimg="http://tympanus.net/Development/RestaurantTemplate/images/background/4.jpg" />
  94.                         </div>
  95.                         <div class="bf_gallery_item">
  96.                             <div class="bf_heading"><h2>Tortelloni Alla Zucca</h2></div>
  97.                             <div class="bf_desc">
  98.                                 <p>Incredibly tasty perfection</p>
  99.                             </div>
  100.                             <img src="http://tympanus.net/Development/RestaurantTemplate/images/foreground/5.jpg" alt="image1" data-bgimg="http://tympanus.net/Development/RestaurantTemplate/images/background/5.jpg" />
  101.                         </div>
  102.                         <div class="bf_gallery_item">
  103.                             <div class="bf_heading"><h2>Calamaretti Fritti</h2></div>
  104.                             <div class="bf_desc">
  105.                                 <p>Combine chunky and soft</p>
  106.                             </div>
  107.                             <img src="http://tympanus.net/Development/RestaurantTemplate/images/foreground/6.jpg" alt="image1" data-bgimg="http://tympanus.net/Development/RestaurantTemplate/images/background/6.jpg" />
  108.                         </div>
  109.                         <div class="bf_gallery_item">
  110.                             <div class="bf_heading"><h2>ITEM AÑADIDO</h2></div>
  111.                             <div class="bf_desc">
  112.                                 <p>blablablabla</p>
  113.                             </div>
  114.                             <img src="http://tympanus.net/Development/RestaurantTemplate/images/foreground/1.jpg" alt="image1" data-bgimg="http://tympanus.net/Development/RestaurantTemplate/images/background/6.jpg" />
  115.                         </div>
  116.                     </div>
  117.                 </div>
  118.             </div>
  119.             <div class="bf_page" id="visit">
  120.                 
  121.             </div>
  122.         </div>
  123.         <div class="bf_footer">
  124.             <a class="bf_left" href="http://tympanus.net/Development/CircularDiscographyTemplate/"><span>&laquo; Previous Demo:</span> Circular Discography Template with jQuery</a>
  125.             <a href="http://tympanus.net/codrops/2011/04/21/restaurant-template/"><strong>back to the Codrops tutorial</strong></a>
  126.             <a href="http://www.flickr.com/photos/krossbow/" target="_blank">and krossbow</a>
  127.             <a href="http://www.flickr.com/people/avlxyz/" target="_blank">Photography by avlxyz</a>
  128.         </div>
  129.         <!-- The JavaScript -->
  130.         <!-- the mousewheel plugin - optional to provide mousewheel support -->
  131.         <script type="text/javascript" src="http://tympanus.net/Development/RestaurantTemplate/js/jquery.mousewheel.js"></script>
  132.         <script type="text/javascript" src="http://tympanus.net/Development/RestaurantTemplate/js/jquery.template.min.js"></script>
  133.         <script>
  134.             var ADPACKSSTYLE = "darkHorizontal";
  135.         </script>
  136.         <script src="http://tympanus.net/codrops/adpacks/adpacks.js"></script>
  137.     </body>
  138. </html>
__________________
Hazle un favor a tu cerebro y juega Ajedrez online
Chess online
  #5 (permalink)  
Antiguo 29/05/2012, 10:02
 
Fecha de Ingreso: julio-2008
Mensajes: 9
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Problema con una plantilla jquery
Gracias por tu contestación, pero no es ese lo que intentaba explicar. El problema está en que no se puede crear otra galería de imágenes en otro ítem del menú (en eso no tengo ningún problema a la hora de crear otro ítem), ya que siempre coge las imágenes de la primera galería, aunque le indiques de donde las tiene que coger. Creo que el problema está en el archivo jquery.template, pero no sé por donde meterle mano.
Gracias de todas formas.

Etiquetas: plantilla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:37.