1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Galeria web através de template

Discussão em 'Web Development' iniciada por jerico, 18 de Dezembro de 2012. (Respostas: 1; Visualizações: 693)

  1. jerico

    jerico Power Member

    Boa tarde,

    Estou a "tentar" fazer um site para a minha empresa através de um template que arranjei por aí...tudo a correr bem até que chego à galeria. Gostava de expor alguma fotografias de trabalhos realizados, bem como um portefólio, e ainda são algumas, mais de 100 penso eu...o meu problema é alterar o template, nomeadamente o produtos.html.

    Ou seja, o template tem um determinado número de fotografias lá colocadas na galeria, umas 16 penso eu, uma página, como eu quero colocar mais, estou a ter problemas, pois ao adiciona-las pensei que elas passariam automaticamente para a "página" 2, se é que me faço entender, porém elas continuam a ser adicionadas para baixo e não é bem isso que pretendo.

    Vou deixar o codigo para darem uma vista de olhos:

    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head>
    <title>Acrilicos PAF</title>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans|Muli' rel='stylesheet' type='text/css'>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
    </head>
    <body class="portfolio pngfix">
    <div id="header">
      <div class="container"><a href="home.html" id="logo"><img src="images/logo.png" alt="Company Logo" /></a>
        <div class="navigation">
          <ul>
            <li><a href="home.html">Home</a>
              <div class="clear"></div>
            </li>
            
            </li>
            <li class="active"><a href="produtos.html">Produtos</a>
              <div class="clear"></div>
            </li>
    
    
            </li>
            <li><a href="portefolio.html">Portefólio</a>
              <div class="clear"></div>
            </li>
            <li><a href="Empresa.html">Empresa</a>
              <div class="clear"></div>
            </li>
            <li><a href="contatos.html">Contatos</a>
              <div class="clear"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="intro">
      <div id="top"></div>
      <div class="container">
        <h2>Produtos </h2>
        <div class="search">
          <form action="#">
            <fieldset>
              <input type="text" name="search" />
              <input type="submit" name="submit" value="" />
            </fieldset>
          </form>
          <div class="clear"></div>
        </div>
        <a class="login" href="#">Log in</a>
        <div class="clear"></div>
      </div>
    </div>
    <div class="container">
      <div id="main">
        <div class="row">
          <div class="span12">
            <ul class="subnavigation">
              <li class="current"><a href="#" data-value="all">All</a></li>
              <li><a href="#" data-value="cat_Cabides">Cabides</a></li>
              <li><a href="#" data-value="cat_Cadeiras">Cadeiras</a></a></li>
              <li><a href="#" data-value="cat_Caixas">Caixas</a></li>
              <li><a href="#" data-value="cat_Candeeiros">Candeeiros</a></li>
              <li><a href="#" data-value="cat_Carro_Bar">Carro Bar</a></li>
              <li><a href="#" data-value="cat_Cavaletes">Cavaletes</a></li>
              <li><a href="#" data-value="cat_Centros_Mesa">Centros de Mesa</a></li>
              <li><a href="#" data-value="cat_Colunas">Colunas</a></li>
              <li><a href="#" data-value="cat_Diversos">Diversos</a></li>
              <li><a href="#" data-value="cat_Estantes">Estantes</a></li>
              <li><a href="#" data-value="cat_Expositores">Expositores</a></li>
              <li><a href="#" data-value="cat_Mesa_TV">Mesas TV</a></li>
              <li><a href="#" data-value="cat_Mesa_Apoio">Mesas Apoio</a></li>
              <li><a href="#" data-value="cat_Mesa_Diversas">Mesas Diversas</a></li>
              <li><a href="#" data-value="cat_Molduras">Molduras</a></li>
              <li><a href="#" data-value="cat_Porta_CDS">Porta CDS</a></li>
              <li><a href="#" data-value="cat_Porta_Guarda_Chuvas">Porta Guarda-Chuvas</a></li>
              <li><a href="#" data-value="cat_Porta_Revistas">Porta Revistas</a></li>
              <li><a href="#" data-value="cat_Pulpitos">Pulpitos</a></li>
              <li><a href="#" data-value="cat_Tabuleiros">Tabuleiros</a></li>
              <li><a href="#" data-value="cat_Toalheiros">Toalheiros</a></li>
              <li><a href="#" data-value="cat_Trofeus">Trofeus</a></li>          
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="separator4 span12"></div>
        </div>
        <div class="row">
          <div class="span12">
            <div class="gallery gallery1">
              <div class="item cat_Cabides" data-id="item1">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Cabides/1.jpg"><img class="round_image" src="content/images/Cabides_miniatura/1.jpg" alt="Cabide"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
                
                <div class="count hidden">1</div>
              </div>
              <div class="item cat_Cadeiras" data-id="item1">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Cadeiras/1.jpg"><img class="round_image" src="content/images/Cadeiras_miniatura/1.jpg" alt="Cadeira CD-03 cristal"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
                
                <div class="count hidden">1</div>
              </div>
              <div class="item cat_Caixas" data-id="item2">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Caixas/1.jpg"><img class="round_image" src="content/images/Caixas_miniatura/1.jpg" alt="Portfolio Item"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
                
                <div class="count hidden">1</div>
              </div>
              <div class="item cat_Candeeiros" data-id="item3">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Candeeiros/1.jpg"><img class="round_image" src="content/images/Candeeiros_miniatura/1.jpg" alt="Portfolio Item"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
                
                <div class="count hidden">1</div>
              </div>
              <div class="item cat_Carro_Bar" data-id="item4">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Carro_Bar/1.jpg"><img class="round_image" src="content/images/Carro_Bar_miniatura/1.jpg" alt="Portfolio Item"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
               
                <div class="count hidden">1</div>
              </div>
              <div class="item cat_Cavaletes" data-id="item5">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Cavaletes/1.jpg"><img class="round_image" src="content/images/Cavaletes_miniatura/1.jpg" alt="Portfolio Item"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
                
                <div class="count hidden">1</div>
              </div>
              <div class="item cat_Centros_Mesa" data-id="item6">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Centros_Mesa/1.jpg"><img class="round_image" src="content/images/Centros_Mesa_miniatura/1.jpg" alt="Portfolio Item"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
                
                <div class="count hidden">1</div>
              </div>
              <div class="item cat_Colunas" data-id="item7">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Colunas/1.jpg"><img class="round_image" src="content/images/Colunas_miniatura/1.jpg" alt="Portfolio Item"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
               
                <div class="count hidden">1</div>
              </div>
              <div class="item cat_Diversos" data-id="item8">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Diversos/1.jpg"><img class="round_image" src="content/images/Diversos_miniatura/1.jpg" alt="Portfolio Item"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
               
                <div class="count hidden">1</div>
              </div>
              <div class="item cat_Estantes" data-id="item9">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Estantes/1.jpg"><img class="round_image" src="content/images/Estantes_miniatura/1.jpg" alt="Portfolio Item"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
        
                <div class="count hidden">1</div>
              </div>
              <div class="item cat_Expositores" data-id="item10">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Expositores/1.jpg"><img class="round_image" src="content/images/Expositores_miniatura/1.jpg" alt="Portfolio Item"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
                
                <div class="count hidden">1</div>
              </div>
              
              <div class="item cat_Mesa_TV" data-id="item11">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Mesa_TV/1.jpg"><img class="round_image" src="content/images/Mesa_TV_miniatura/1.jpg" alt="Portfolio Item"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
               
                <div class="count hidden">1</div>
              </div>
              
              <div class="item cat_Mesa_Apoio" data-id="item12">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Mesas_Apoio/1.jpg"><img class="round_image" src="content/images/Mesas_Apoio_miniatura/1.jpg" alt="Portfolio Item"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
                
                <div class="count hidden">1</div>
                </div>
                
                <div class="item cat_Mesas_Diversas" data-id="item13">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Mesas_Diversas/1.jpg"><img class="round_image" src="content/images/Mesas_Diversas_miniatura/1.jpg" alt="Carro Bar"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
                                   
                <div class="count hidden">1</div>
              </div>
              
              <div class="item cat_Molduras" data-id="item14">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Molduras/1.jpg"><img class="round_image" src="content/images/Molduras_miniatura/1.jpg" alt="Carro Bar"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
              
                <div class="count hidden">1</div>
              </div>
              
              <div class="item cat_Porta_CDS" data-id="item15">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Porta_CDS/1.jpg"><img class="round_image" src="content/images/Porta_CDS_miniatura/1.jpg" alt="Carro Bar"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
                
               
                <div class="count hidden">1</div>
              </div>
              
              
             
            
             <div class="item cat_Porta_CDS" data-id="item16">
                <div class="item_image_wrap"><a class="item_image" rel="prettyPhoto[gallery]" href="content/images/Porta_CDS/1.jpg"><img class="round_image" src="content/images/Porta_CDS_miniatura/1.jpg" alt="Carro Bar"/><img class="frame_hover" src="images/portfolio_hover_camera.png" alt="hover"/></a></div>
                
               
                <div class="count hidden">1</div>
              </div>
            
             <div class="clear"></div>
            </div>
            
            <div class="pagination_container">
              <div class="pagination pagination3"><a href="#" class="previous"></a><span class="page_current">1</span><a href="produtos2.html" class="page">2</a><a href="#" class="page">3</a><a href="#" class="page">4</a><a href="#" class="page">5</a><a href="produtos2.html" class="next"></a>
                <div class="clear"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="container">
        <div class="widget_area">
          <div class="row">
            <div class="span3">
              
               
                
            
            </div>
          </div>
        </div>
        <div class="foot">
          <ul class="social_icons">
            <li><a class="button" href="http://www.facebook.com/acrilicospaf"target="_blank"><img src="images/social_facebook.png" alt="facebook" /><img src="images/social_facebook_hover.png" alt="facebook" class="hover" /></a></li>
            <li><a class="button" href="#"><img src="images/social_twitter.png" alt="twitter" /><img src="images/social_twitter_hover.png" alt="twitter" class="hover" /></a></li>
            <li><a class="button" href="#"><img src="images/social_google.png" alt="googleplus" /><img src="images/social_google_hover.png" alt="google" class="hover" /></a></li>
            <li><a class="button" href="#"><img src="images/social_lastfm.png" alt="lastfm" /><img src="images/social_lastfm_hover.png" alt="lastfm" class="hover" /></a></li>
            <li><a class="button" href="#"><img src="images/social_rss.png" alt="rss" /><img src="images/social_rss_hover.png" alt="rss" class="hover" /></a></li>
          </ul>
        </div>
        <p class="copyright">Copyright © 2012 Acrilicos PAF</p>
      </div>
    </div>
    <a id="top_button" href="#top"></a>
    <script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="scripts/superfish.js" type="text/javascript"></script>
    <script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="scripts/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script src="scripts/jquery.quicksand8d1e.js?ver=1.2.2" type="text/javascript"></script>
    <script src="scripts/custom4963.js?ver=1.1" type="text/javascript"></script>
    </body>
    
    
    </html>
    código jo jquery...não sei se é bem isto, existem mais "jquery" no template...

    Código:
    /* ------------------------------------------------------------------------	Class: prettyPhoto
    	Use: Lightbox clone for jQuery
    	Author: Stephane Caron (http://www.no-margin-for-errors.com)
    	Version: 3.1.4
    ------------------------------------------------------------------------- */
    
    
    (function($){$.prettyPhoto={version:'3.1.4'};$.fn.prettyPhoto=function(pp_settings){pp_settings=jQuery.extend({hook:'rel',animation_speed:'fast',ajaxcallback:function(){},slideshow:5000,autoplay_slideshow:false,opacity:0.80,show_title:true,allow_resize:true,allow_expand:true,default_width:500,default_height:344,counter_separator_label:'/',theme:'pp_default',horizontal_padding:20,hideflash:false,wmode:'opaque',autoplay:true,modal:false,deeplinking:true,overlay_gallery:true,overlay_gallery_max:30,keyboard_shortcuts:true,changepicturecallback:function(){},callback:function(){},ie6_fallback:true,markup:'<div class="pp_pic_holder"> \
          <div class="ppt">&nbsp;</div> \
          <div class="pp_top"> \
           <div class="pp_left"></div> \
           <div class="pp_middle"></div> \
           <div class="pp_right"></div> \
          </div> \
          <div class="pp_content_container"> \
           <div class="pp_left"> \
           <div class="pp_right"> \
            <div class="pp_content"> \
             <div class="pp_loaderIcon"></div> \
             <div class="pp_fade"> \
              <a href="#" class="pp_expand" title="Expand the image">Expand</a> \
              <div class="pp_hoverContainer"> \
               <a class="pp_next" href="#">next</a> \
               <a class="pp_previous" href="#">previous</a> \
              </div> \
              <div id="pp_full_res"></div> \
              <div class="pp_details"> \
               <div class="pp_nav"> \
                <a href="#" class="pp_arrow_previous">Previous</a> \
                <p class="currentTextHolder">0/0</p> \
                <a href="#" class="pp_arrow_next">Next</a> \
               </div> \
               <p class="pp_description"></p> \
               <div class="pp_social">{pp_social}</div> \
               <a class="pp_close" href="#">Close</a> \
              </div> \
             </div> \
            </div> \
           </div> \
           </div> \
          </div> \
          <div class="pp_bottom"> \
           <div class="pp_left"></div> \
           <div class="pp_middle"></div> \
           <div class="pp_right"></div> \
          </div> \
         </div> \
         <div class="pp_overlay"></div>',gallery_markup:'<div class="pp_gallery"> \
            <a href="#" class="pp_arrow_previous">Previous</a> \
            <div> \
             <ul> \
              {gallery} \
             </ul> \
            </div> \
            <a href="#" class="pp_arrow_next">Next</a> \
           </div>',image_markup:'<img id="fullResImage" src="{path}" />',flash_markup:'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{width}" height="{height}"><param name="wmode" value="{wmode}" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{path}" /><embed src="{path}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="{width}" height="{height}" wmode="{wmode}"></embed></object>',quicktime_markup:'<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="{height}" width="{width}"><param name="src" value="{path}"><param name="autoplay" value="{autoplay}"><param name="type" value="video/quicktime"><embed src="{path}" height="{height}" width="{width}" autoplay="{autoplay}" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>',iframe_markup:'<iframe src ="{path}" width="{width}" height="{height}" frameborder="no"></iframe>',inline_markup:'<div class="pp_inline">{content}</div>',custom_markup:'',social_tools:'<div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div>'},pp_settings);var matchedObjects=this,percentBased=false,pp_dimensions,pp_open,pp_contentHeight,pp_contentWidth,pp_containerHeight,pp_containerWidth,windowHeight=$(window).height(),windowWidth=$(window).width(),pp_slideshow;doresize=true,scroll_pos=_get_scroll();$(window).unbind('resize.prettyphoto').bind('resize.prettyphoto',function(){_center_overlay();_resize_overlay();});if(pp_settings.keyboard_shortcuts){$(document).unbind('keydown.prettyphoto').bind('keydown.prettyphoto',function(e){if(typeof $pp_pic_holder!='undefined'){if($pp_pic_holder.is(':visible')){switch(e.keyCode){case 37:$.prettyPhoto.changePage('previous');e.preventDefault();break;case 39:$.prettyPhoto.changePage('next');e.preventDefault();break;case 27:if(!settings.modal)
    $.prettyPhoto.close();e.preventDefault();break;};};};});};$.prettyPhoto.initialize=function(){settings=pp_settings;if(settings.theme=='pp_default')settings.horizontal_padding=16;if(settings.ie6_fallback&&$.browser.msie&&parseInt($.browser.version)==6)settings.theme="light_square";theRel=$(this).attr(settings.hook);galleryRegExp=/\[(?:.*)\]/;isSet=(galleryRegExp.exec(theRel))?true:false;pp_images=(isSet)?jQuery.map(matchedObjects,function(n,i){if($(n).attr(settings.hook).indexOf(theRel)!=-1)return $(n).attr('href');}):$.makeArray($(this).attr('href'));pp_titles=(isSet)?jQuery.map(matchedObjects,function(n,i){if($(n).attr(settings.hook).indexOf(theRel)!=-1)return($(n).find('img').attr('alt'))?$(n).find('img').attr('alt'):"";}):$.makeArray($(this).find('img').attr('alt'));pp_descriptions=(isSet)?jQuery.map(matchedObjects,function(n,i){if($(n).attr(settings.hook).indexOf(theRel)!=-1)return($(n).attr('title'))?$(n).attr('title'):"";}):$.makeArray($(this).attr('title'));if(pp_images.length>settings.overlay_gallery_max)settings.overlay_gallery=false;set_position=jQuery.inArray($(this).attr('href'),pp_images);rel_index=(isSet)?set_position:$("a["+settings.hook+"^='"+theRel+"']").index($(this));_build_overlay(this);if(settings.allow_resize)
    $(window).bind('scroll.prettyphoto',function(){_center_overlay();});$.prettyPhoto.open();return false;}
    $.prettyPhoto.open=function(event){if(typeof settings=="undefined"){settings=pp_settings;if($.browser.msie&&$.browser.version==6)settings.theme="light_square";pp_images=$.makeArray(arguments[0]);pp_titles=(arguments[1])?$.makeArray(arguments[1]):$.makeArray("");pp_descriptions=(arguments[2])?$.makeArray(arguments[2]):$.makeArray("");isSet=(pp_images.length>1)?true:false;set_position=(arguments[3])?arguments[3]:0;_build_overlay(event.target);}
    if($.browser.msie&&$.browser.version==6)$('select').css('visibility','hidden');if(settings.hideflash)$('object,embed,iframe[src*=youtube],iframe[src*=vimeo]').css('visibility','hidden');_checkPosition($(pp_images).size());$('.pp_loaderIcon').show();if(settings.deeplinking)
    setHashtag();if(settings.social_tools){facebook_like_link=settings.social_tools.replace('{location_href}',encodeURIComponent(location.href));$pp_pic_holder.find('.pp_social').html(facebook_like_link);}
    if($ppt.is(':hidden'))$ppt.css('opacity',0).show();$pp_overlay.show().fadeTo(settings.animation_speed,settings.opacity);$pp_pic_holder.find('.currentTextHolder').text((set_position+1)+settings.counter_separator_label+$(pp_images).size());if(typeof pp_descriptions[set_position]!='undefined'&&pp_descriptions[set_position]!=""){$pp_pic_holder.find('.pp_description').show().html(unescape(pp_descriptions[set_position]));}else{$pp_pic_holder.find('.pp_description').hide();}
    movie_width=(parseFloat(getParam('width',pp_images[set_position])))?getParam('width',pp_images[set_position]):settings.default_width.toString();movie_height=(parseFloat(getParam('height',pp_images[set_position])))?getParam('height',pp_images[set_position]):settings.default_height.toString();percentBased=false;if(movie_height.indexOf('%')!=-1){movie_height=parseFloat(($(window).height()*parseFloat(movie_height)/100)-150);percentBased=true;}
    if(movie_width.indexOf('%')!=-1){movie_width=parseFloat(($(window).width()*parseFloat(movie_width)/100)-150);percentBased=true;}
    $pp_pic_holder.fadeIn(function(){(settings.show_title&&pp_titles[set_position]!=""&&typeof pp_titles[set_position]!="undefined")?$ppt.html(unescape(pp_titles[set_position])):$ppt.html('&nbsp;');imgPreloader="";skipInjection=false;switch(_getFileType(pp_images[set_position])){case'image':imgPreloader=new Image();nextImage=new Image();if(isSet&&set_position<$(pp_images).size()-1)nextImage.src=pp_images[set_position+1];prevImage=new Image();if(isSet&&pp_images[set_position-1])prevImage.src=pp_images[set_position-1];$pp_pic_holder.find('#pp_full_res')[0].innerHTML=settings.image_markup.replace(/{path}/g,pp_images[set_position]);imgPreloader.onload=function(){pp_dimensions=_fitToViewport(imgPreloader.width,imgPreloader.height);_showContent();};imgPreloader.onerror=function(){alert('Image cannot be loaded. Make sure the path is correct and image exist.');$.prettyPhoto.close();};imgPreloader.src=pp_images[set_position];break;case'youtube':pp_dimensions=_fitToViewport(movie_width,movie_height);movie_id=getParam('v',pp_images[set_position]);if(movie_id==""){movie_id=pp_images[set_position].split('youtu.be/index.html');movie_id=movie_id[1];if(movie_id.indexOf('?')>0)
    movie_id=movie_id.substr(0,movie_id.indexOf('?'));if(movie_id.indexOf('&')>0)
    movie_id=movie_id.substr(0,movie_id.indexOf('&'));}
    movie='http://www.youtube.com/embed/'+movie_id;(getParam('rel',pp_images[set_position]))?movie+="?rel="+getParam('rel',pp_images[set_position]):movie+="?rel=1";if(settings.autoplay)movie+="&autoplay=1";toInject=settings.iframe_markup.replace(/{width}/g,pp_dimensions['width']).replace(/{height}/g,pp_dimensions['height']).replace(/{wmode}/g,settings.wmode).replace(/{path}/g,movie);break;case'vimeo':pp_dimensions=_fitToViewport(movie_width,movie_height);movie_id=pp_images[set_position];var regExp=/http:\/\/(www\.)?vimeo.com\/(\d+)/;var match=movie_id.match(regExp);movie='http://player.vimeo.com/video/'+match[2]+'?title=0&amp;byline=0&amp;portrait=0';if(settings.autoplay)movie+="&autoplay=1;";vimeo_width=pp_dimensions['width']+'/embed/?moog_width='+pp_dimensions['width'];toInject=settings.iframe_markup.replace(/{width}/g,vimeo_width).replace(/{height}/g,pp_dimensions['height']).replace(/{path}/g,movie);break;case'quicktime':pp_dimensions=_fitToViewport(movie_width,movie_height);pp_dimensions['height']+=15;pp_dimensions['contentHeight']+=15;pp_dimensions['containerHeight']+=15;toInject=settings.quicktime_markup.replace(/{width}/g,pp_dimensions['width']).replace(/{height}/g,pp_dimensions['height']).replace(/{wmode}/g,settings.wmode).replace(/{path}/g,pp_images[set_position]).replace(/{autoplay}/g,settings.autoplay);break;case'flash':pp_dimensions=_fitToViewport(movie_width,movie_height);flash_vars=pp_images[set_position];flash_vars=flash_vars.substring(pp_images[set_position].indexOf('flashvars')+10,pp_images[set_position].length);filename=pp_images[set_position];filename=filename.substring(0,filename.indexOf('?'));toInject=settings.flash_markup.replace(/{width}/g,pp_dimensions['width']).replace(/{height}/g,pp_dimensions['height']).replace(/{wmode}/g,settings.wmode).replace(/{path}/g,filename+'?'+flash_vars);break;case'iframe':pp_dimensions=_fitToViewport(movie_width,movie_height);frame_url=pp_images[set_position];frame_url=frame_url.substr(0,frame_url.indexOf('iframe')-1);toInject=settings.iframe_markup.replace(/{width}/g,pp_dimensions['width']).replace(/{height}/g,pp_dimensions['height']).replace(/{path}/g,frame_url);break;case'ajax':doresize=false;pp_dimensions=_fitToViewport(movie_width,movie_height);doresize=true;skipInjection=true;$.get(pp_images[set_position],function(responseHTML){toInject=settings.inline_markup.replace(/{content}/g,responseHTML);$pp_pic_holder.find('#pp_full_res')[0].innerHTML=toInject;_showContent();});break;case'custom':pp_dimensions=_fitToViewport(movie_width,movie_height);toInject=settings.custom_markup;break;case'inline':myClone=$(pp_images[set_position]).clone().append('<br clear="all" />').css({'width':settings.default_width}).wrapInner('<div id="pp_full_res"><div class="pp_inline"></div></div>').appendTo($('body')).show();doresize=false;pp_dimensions=_fitToViewport($(myClone).width(),$(myClone).height());doresize=true;$(myClone).remove();toInject=settings.inline_markup.replace(/{content}/g,$(pp_images[set_position]).html());break;};if(!imgPreloader&&!skipInjection){$pp_pic_holder.find('#pp_full_res')[0].innerHTML=toInject;_showContent();};});return false;};$.prettyPhoto.changePage=function(direction){currentGalleryPage=0;if(direction=='previous'){set_position--;if(set_position<0)set_position=$(pp_images).size()-1;}else if(direction=='next'){set_position++;if(set_position>$(pp_images).size()-1)set_position=0;}else{set_position=direction;};rel_index=set_position;if(!doresize)doresize=true;if(settings.allow_expand){$('.pp_contract').removeClass('pp_contract').addClass('pp_expand');}
    _hideContent(function(){$.prettyPhoto.open();});};$.prettyPhoto.changeGalleryPage=function(direction){if(direction=='next'){currentGalleryPage++;if(currentGalleryPage>totalPage)currentGalleryPage=0;}else if(direction=='previous'){currentGalleryPage--;if(currentGalleryPage<0)currentGalleryPage=totalPage;}else{currentGalleryPage=direction;};slide_speed=(direction=='next'||direction=='previous')?settings.animation_speed:0;slide_to=currentGalleryPage*(itemsPerPage*itemWidth);$pp_gallery.find('ul').animate({left:-slide_to},slide_speed);};$.prettyPhoto.startSlideshow=function(){if(typeof pp_slideshow=='undefined'){$pp_pic_holder.find('.pp_play').unbind('click').removeClass('pp_play').addClass('pp_pause').click(function(){$.prettyPhoto.stopSlideshow();return false;});pp_slideshow=setInterval($.prettyPhoto.startSlideshow,settings.slideshow);}else{$.prettyPhoto.changePage('next');};}
    $.prettyPhoto.stopSlideshow=function(){$pp_pic_holder.find('.pp_pause').unbind('click').removeClass('pp_pause').addClass('pp_play').click(function(){$.prettyPhoto.startSlideshow();return false;});clearInterval(pp_slideshow);pp_slideshow=undefined;}
    $.prettyPhoto.close=function(){if($pp_overlay.is(":animated"))return;$.prettyPhoto.stopSlideshow();$pp_pic_holder.stop().find('object,embed').css('visibility','hidden');$('div.pp_pic_holder,div.ppt,.pp_fade').fadeOut(settings.animation_speed,function(){$(this).remove();});$pp_overlay.fadeOut(settings.animation_speed,function(){if($.browser.msie&&$.browser.version==6)$('select').css('visibility','visible');if(settings.hideflash)$('object,embed,iframe[src*=youtube],iframe[src*=vimeo]').css('visibility','visible');$(this).remove();$(window).unbind('scroll.prettyphoto');clearHashtag();settings.callback();doresize=true;pp_open=false;delete settings;});};function _showContent(){$('.pp_loaderIcon').hide();projectedTop=scroll_pos['scrollTop']+((windowHeight/2)-(pp_dimensions['containerHeight']/2));if(projectedTop<0)projectedTop=0;$ppt.fadeTo(settings.animation_speed,1);$pp_pic_holder.find('.pp_content').animate({height:pp_dimensions['contentHeight'],width:pp_dimensions['contentWidth']},settings.animation_speed);$pp_pic_holder.animate({'top':projectedTop,'left':((windowWidth/2)-(pp_dimensions['containerWidth']/2)<0)?0:(windowWidth/2)-(pp_dimensions['containerWidth']/2),width:pp_dimensions['containerWidth']},settings.animation_speed,function(){$pp_pic_holder.find('.pp_hoverContainer,#fullResImage').height(pp_dimensions['height']).width(pp_dimensions['width']);$pp_pic_holder.find('.pp_fade').fadeIn(settings.animation_speed);if(isSet&&_getFileType(pp_images[set_position])=="image"){$pp_pic_holder.find('.pp_hoverContainer').show();}else{$pp_pic_holder.find('.pp_hoverContainer').hide();}
    if(settings.allow_expand){if(pp_dimensions['resized']){$('a.pp_expand,a.pp_contract').show();}else{$('a.pp_expand').hide();}}
    if(settings.autoplay_slideshow&&!pp_slideshow&&!pp_open)$.prettyPhoto.startSlideshow();settings.changepicturecallback();pp_open=true;});_insert_gallery();pp_settings.ajaxcallback();};function _hideContent(callback){$pp_pic_holder.find('#pp_full_res object,#pp_full_res embed').css('visibility','hidden');$pp_pic_holder.find('.pp_fade').fadeOut(settings.animation_speed,function(){$('.pp_loaderIcon').show();callback();});};function _checkPosition(setCount){(setCount>1)?$('.pp_nav').show():$('.pp_nav').hide();};function _fitToViewport(width,height){resized=false;_getDimensions(width,height);imageWidth=width,imageHeight=height;if(((pp_containerWidth>windowWidth)||(pp_containerHeight>windowHeight))&&doresize&&settings.allow_resize&&!percentBased){resized=true,fitting=false;while(!fitting){if((pp_containerWidth>windowWidth)){imageWidth=(windowWidth-200);imageHeight=(height/width)*imageWidth;}else if((pp_containerHeight>windowHeight)){imageHeight=(windowHeight-200);imageWidth=(width/height)*imageHeight;}else{fitting=true;};pp_containerHeight=imageHeight,pp_containerWidth=imageWidth;};_getDimensions(imageWidth,imageHeight);if((pp_containerWidth>windowWidth)||(pp_containerHeight>windowHeight)){_fitToViewport(pp_containerWidth,pp_containerHeight)};};return{width:Math.floor(imageWidth),height:Math.floor(imageHeight),containerHeight:Math.floor(pp_containerHeight),containerWidth:Math.floor(pp_containerWidth)+(settings.horizontal_padding*2),contentHeight:Math.floor(pp_contentHeight),contentWidth:Math.floor(pp_contentWidth),resized:resized};};function _getDimensions(width,height){width=parseFloat(width);height=parseFloat(height);$pp_details=$pp_pic_holder.find('.pp_details');$pp_details.width(width);detailsHeight=parseFloat($pp_details.css('marginTop'))+parseFloat($pp_details.css('marginBottom'));$pp_details=$pp_details.clone().addClass(settings.theme).width(width).appendTo($('body')).css({'position':'absolute','top':-10000});detailsHeight+=$pp_details.height();detailsHeight=(detailsHeight<=34)?36:detailsHeight;if($.browser.msie&&$.browser.version==7)detailsHeight+=8;$pp_details.remove();$pp_title=$pp_pic_holder.find('.ppt');$pp_title.width(width);titleHeight=parseFloat($pp_title.css('marginTop'))+parseFloat($pp_title.css('marginBottom'));$pp_title=$pp_title.clone().appendTo($('body')).css({'position':'absolute','top':-10000});titleHeight+=$pp_title.height();$pp_title.remove();pp_contentHeight=height+detailsHeight;pp_contentWidth=width;pp_containerHeight=pp_contentHeight+titleHeight+$pp_pic_holder.find('.pp_top').height()+$pp_pic_holder.find('.pp_bottom').height();pp_containerWidth=width;}
    function _getFileType(itemSrc){if(itemSrc.match(/youtube\.com\/watch/i)||itemSrc.match(/youtu\.be/i)){return'youtube';}else if(itemSrc.match(/vimeo\.com/i)){return'vimeo';}else if(itemSrc.match(/\b.mov\b/i)){return'quicktime';}else if(itemSrc.match(/\b.swf\b/i)){return'flash';}else if(itemSrc.match(/\biframe=true\b/i)){return'iframe';}else if(itemSrc.match(/\bajax=true\b/i)){return'ajax';}else if(itemSrc.match(/\bcustom=true\b/i)){return'custom';}else if(itemSrc.substr(0,1)=='#'){return'inline';}else{return'image';};};function _center_overlay(){if(doresize&&typeof $pp_pic_holder!='undefined'){scroll_pos=_get_scroll();contentHeight=$pp_pic_holder.height(),contentwidth=$pp_pic_holder.width();projectedTop=(windowHeight/2)+scroll_pos['scrollTop']-(contentHeight/2);if(projectedTop<0)projectedTop=0;if(contentHeight>windowHeight)
    return;$pp_pic_holder.css({'top':projectedTop,'left':(windowWidth/2)+scroll_pos['scrollLeft']-(contentwidth/2)});};};function _get_scroll(){if(self.pageYOffset){return{scrollTop:self.pageYOffset,scrollLeft:self.pageXOffset};}else if(document.documentElement&&document.documentElement.scrollTop){return{scrollTop:document.documentElement.scrollTop,scrollLeft:document.documentElement.scrollLeft};}else if(document.body){return{scrollTop:document.body.scrollTop,scrollLeft:document.body.scrollLeft};};};function _resize_overlay(){windowHeight=$(window).height(),windowWidth=$(window).width();if(typeof $pp_overlay!="undefined")$pp_overlay.height($(document).height()).width(windowWidth);};function _insert_gallery(){if(isSet&&settings.overlay_gallery&&_getFileType(pp_images[set_position])=="image"&&(settings.ie6_fallback&&!($.browser.msie&&parseInt($.browser.version)==6))){itemWidth=52+5;navWidth=(settings.theme=="facebook"||settings.theme=="pp_default")?50:30;itemsPerPage=Math.floor((pp_dimensions['containerWidth']-100-navWidth)/itemWidth);itemsPerPage=(itemsPerPage<pp_images.length)?itemsPerPage:pp_images.length;totalPage=Math.ceil(pp_images.length/itemsPerPage)-1;if(totalPage==0){navWidth=0;$pp_gallery.find('.pp_arrow_next,.pp_arrow_previous').hide();}else{$pp_gallery.find('.pp_arrow_next,.pp_arrow_previous').show();};galleryWidth=itemsPerPage*itemWidth;fullGalleryWidth=pp_images.length*itemWidth;$pp_gallery.css('margin-left',-((galleryWidth/2)+(navWidth/2))).find('div:first').width(galleryWidth+5).find('ul').width(fullGalleryWidth).find('li.selected').removeClass('selected');goToPage=(Math.floor(set_position/itemsPerPage)<totalPage)?Math.floor(set_position/itemsPerPage):totalPage;$.prettyPhoto.changeGalleryPage(goToPage);$pp_gallery_li.filter(':eq('+set_position+')').addClass('selected');}else{$pp_pic_holder.find('.pp_content').unbind('mouseenter mouseleave');}}
    function _build_overlay(caller){if(settings.social_tools)
    facebook_like_link=settings.social_tools.replace('{location_href}',encodeURIComponent(location.href));settings.markup=settings.markup.replace('{pp_social}','');$('body').append(settings.markup);$pp_pic_holder=$('.pp_pic_holder'),$ppt=$('.ppt'),$pp_overlay=$('div.pp_overlay');if(isSet&&settings.overlay_gallery){currentGalleryPage=0;toInject="";for(var i=0;i<pp_images.length;i++){if(!pp_images[i].match(/\b(jpg|jpeg|png|gif)\b/gi)){classname='default';img_src='';}else{classname='';img_src=pp_images[i];}
    toInject+="<li class='"+classname+"'><a href='#'><img src='"+img_src+"' width='50' alt='' /></a></li>";};toInject=settings.gallery_markup.replace(/{gallery}/g,toInject);$pp_pic_holder.find('#pp_full_res').after(toInject);$pp_gallery=$('.pp_pic_holder .pp_gallery'),$pp_gallery_li=$pp_gallery.find('li');$pp_gallery.find('.pp_arrow_next').click(function(){$.prettyPhoto.changeGalleryPage('next');$.prettyPhoto.stopSlideshow();return false;});$pp_gallery.find('.pp_arrow_previous').click(function(){$.prettyPhoto.changeGalleryPage('previous');$.prettyPhoto.stopSlideshow();return false;});$pp_pic_holder.find('.pp_content').hover(function(){$pp_pic_holder.find('.pp_gallery:not(.disabled)').fadeIn();},function(){$pp_pic_holder.find('.pp_gallery:not(.disabled)').fadeOut();});itemWidth=52+5;$pp_gallery_li.each(function(i){$(this).find('a').click(function(){$.prettyPhoto.changePage(i);$.prettyPhoto.stopSlideshow();return false;});});};if(settings.slideshow){$pp_pic_holder.find('.pp_nav').prepend('<a href="#" class="pp_play">Play</a>')
    $pp_pic_holder.find('.pp_nav .pp_play').click(function(){$.prettyPhoto.startSlideshow();return false;});}
    $pp_pic_holder.attr('class','pp_pic_holder '+settings.theme);$pp_overlay.css({'opacity':0,'height':$(document).height(),'width':$(window).width()}).bind('click',function(){if(!settings.modal)$.prettyPhoto.close();});$('a.pp_close').bind('click',function(){$.prettyPhoto.close();return false;});if(settings.allow_expand){$('a.pp_expand').bind('click',function(e){if($(this).hasClass('pp_expand')){$(this).removeClass('pp_expand').addClass('pp_contract');doresize=false;}else{$(this).removeClass('pp_contract').addClass('pp_expand');doresize=true;};_hideContent(function(){$.prettyPhoto.open();});return false;});}
    $pp_pic_holder.find('.pp_previous, .pp_nav .pp_arrow_previous').bind('click',function(){$.prettyPhoto.changePage('previous');$.prettyPhoto.stopSlideshow();return false;});$pp_pic_holder.find('.pp_next, .pp_nav .pp_arrow_next').bind('click',function(){$.prettyPhoto.changePage('next');$.prettyPhoto.stopSlideshow();return false;});_center_overlay();};if(!pp_alreadyInitialized&&getHashtag()){pp_alreadyInitialized=true;hashIndex=getHashtag();hashRel=hashIndex;hashIndex=hashIndex.substring(hashIndex.indexOf('http://demo.sacredpixel.com/')+1,hashIndex.length-1);hashRel=hashRel.substring(0,hashRel.indexOf('http://demo.sacredpixel.com/'));setTimeout(function(){$("a["+pp_settings.hook+"^='"+hashRel+"']:eq("+hashIndex+")").trigger('click');},50);}
    return this.unbind('click.prettyphoto').bind('click.prettyphoto',$.prettyPhoto.initialize);};function getHashtag(){url=location.href;hashtag=(url.indexOf('#prettyPhoto')!==-1)?decodeURI(url.substring(url.indexOf('#prettyPhoto')+1,url.length)):false;return hashtag;};function setHashtag(){if(typeof theRel=='undefined')return;location.hash=theRel+'/'+rel_index+'/';};function clearHashtag(){if(location.href.indexOf('#prettyPhoto')!==-1)location.hash="prettyPhoto";}
    function getParam(name,url){name=name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");var regexS="[\\?&]"+name+"=([^&#]*)";var regex=new RegExp(regexS);var results=regex.exec(url);return(results==null)?"":results[1];}})(jQuery);var pp_alreadyInitialized=false;

    não sei se é bem isto que tenho de colocar aqui mas, se faltar qualquer coisa agradecia que me dissessem...

    AH, DE SALIENTAR QUE SOU UM VERDADEIRO NOVATO NO QUE DIZ RESPEITO À CRIAÇÃO DE WEBSITES...É A PRIMEIRA VEZ QUE ME AVENTURO EM ALGO SEMELHANTE...

    PEÇO DESCULPA SE NÃO ME FIZ ENTENDER EM ALGO, MAS O TEMPO É CURTO,

    cumprimentos,
     
  2. maxperformance

    maxperformance Power Member

    Boas, como vou dizer isto..
    nao leves a mal mas,

    ninguém se vai dar ao trabalho de ver as mais de 100 fotos, e muito menos as 500 linhas de codigo comprimido.

    escolhe das 100 os teus melhores trabalhos e fica-te por ai alem de dar mais visibilidade é mais simples e facil.
     

Partilhar esta Página