Annonce

  •  » Styles
  •  » Page d'accueil avec fond d'images

#1 2013-08-06 09:08:09

SCH
Membre
2013-08-06
4

Page d'accueil avec fond d'images

Bonjour,

Débutant en piwigo, je souhaiterais créer une page d'accueil afin qu'elle ressemble à ceci. Ainsi je souhaiterais mettre les liens album et contact de piwigo dans le menu noir afin de basculer dans piwigo. J'utilise le theme Slide.

J'ai donc essayé de récupérer le code de ce theme wordpress afin de le coller dans le plug in additional pages pour créer ma page d'accueil (html + css). Mes capacités étant limitées je n'y suis pas arrivé...

J'ai réussi à incorporer une background image cependant je n'arrive pas à créer la boucle qui semble être du javascript...

Si quelqu'un avait une idée je le remercie par avance.

EDIT : Désolé , j'ai corrigé le lien ;)

Dernière modification par SCH (2013-08-06 09:30:38)

Hors ligne

#2 2013-08-06 09:11:57

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
14884

Re: Page d'accueil avec fond d'images

Bonjour,

le liens renvois sur le forum ;-)


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#3 2013-08-06 11:51:24

Miklfe
Membre
Sarthe
2010-11-13
364

Re: Page d'accueil avec fond d'images

Salut
il faut intégrer à ta page le plugin jquery supersize.

Hors ligne

#4 2013-08-07 11:38:52

SCH
Membre
2013-08-06
4

Re: Page d'accueil avec fond d'images

Merci pour vos réponses!

J'ai réussi à intégrer le plug-in que tu m'as indiqué : ici

Il faut maintenant que je baisse les liens et le logo ; et ce sera dans la poche.

Merci Miklfe pour ton thème que j'adore et pour le coup de pouce ;)

Hors ligne

#5 2013-08-07 13:08:04

Miklfe
Membre
Sarthe
2010-11-13
364

Re: Page d'accueil avec fond d'images

Salut
très bien cette page d’accueil,
Pour moi manque un titre dans le header de la page catégorie.
Et sinon tu il ne te reste plus qu'a enlevé le display:none sur le copyright ce serra plus sympa pour les dev de Piwigo (le lien piwitheme tu peux l'enlevé si tu veux).
@+

Hors ligne

#6 2013-08-07 14:27:37

SCH
Membre
2013-08-06
4

Re: Page d'accueil avec fond d'images

Pour le header je pense mettre une petite bannière.

Pour le copyright j'ai cherché à l'enlever uniquement en page d'accueil mais je n'y arrivais pas j'ai donc du passer le display à none. Si tu as une solution je laisserais avec plaisir les liens dans le foot du site.

Hors ligne

#7 2013-08-07 15:12:53

Miklfe
Membre
Sarthe
2010-11-13
364

Re: Page d'accueil avec fond d'images

#theHomePage #copyright{display:none;}

Hors ligne

#8 2013-08-08 10:04:32

patfrwar
Membre
Tours
2011-05-24
164

Re: Page d'accueil avec fond d'images

Bonjour SCH

Sympa ta page d'accueil

peux tu faire un petit topo pour expliquer comment tu as intégré le Script supersize dans ta Page

cdlt

Hors ligne

#9 2013-08-12 13:41:32

SCH
Membre
2013-08-06
4

Re: Page d'accueil avec fond d'images

Salut,

Attention! Gros bidouillage de ma part.

J'ai récupéré le fichier supersized que Miklfe m'a proposé au début du fil. J'ai copié les dossiers (css, img, js) dans un répertoire, puis ajusté les adresses dans le code java et le tour était joué...

Tu trouveras mon code de la page d'accueil plus bas.
Dans le code java, à "image" j'ai intégré les url de mes photos.

J'espère t'avoir été utile.

Et encore merci pour l'aide Miklfe ;)

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <!--
    Supersized - Fullscreen Slideshow jQuery Plugin
    Version : 3.2.7
    Site  : www.buildinternet.com/project/supersized
    
    Author  : Sam Dunn
    Company : One Mighty Roar (www.onemightyroar.com)
    License : MIT License / GPL License
  -->

  <head>

    <title>Supersized - Full Screen Background Slideshow jQuery Plugin</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
    <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>
    
    <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
    <script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
    
    <script type="text/javascript">
      
      jQuery(function($){
        
        $.supersized({
        
          // Functionality
          slide_interval          :   3000,    // Length between transitions
          transition              :   1,       // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
          transition_speed    :  700,    // Speed of transition
                                 
          // Components              
          slide_links        :  'blank',  // Individual links for each slide (Options: false, 'num', 'name', 'blank')
          slides           :    [      // Slideshow Images
                            {image : 'http://www.studioscparis.fr/home/css/img/botswana.jpg', title : 'Image Credit: Sébastien Chiavassa', thumb : 'http://www.studioscparis.fr/home/css/img/botswana.jpg', url : 'http://www.studioscparis.com'},
                            {image : 'http://www.studioscparis.fr/home/css/img/Elephant.jpg', title : 'Image Credit: Sébastien Chiavassa', thumb : 'http://www.studioscparis.fr/home/css/img/Elephant.jpg', url : 'http://www.studioscparis.com/'},  
                            {image : 'http://www.studioscparis.fr/home/css/img/Venise.jpg', title : 'Image Credit: Sébastien Chiavassa', thumb : 'http://www.studioscparis.fr/home/css/img/Venise.jpg', url : 'http://www.studioscparis.fr/home/css/img/Venise.jpg'},
                            {image : 'http://www.studioscparis.fr/home/css/img/subway.jpg', title : 'Image Credit: Sébastien Chiavassa', thumb : 'http://www.studioscparis.fr/home/css/img/subway.jpg', url : 'http://www.studioscparis.com'},
                            {image : 'http://www.studioscparis.fr/home/css/img/botswana.jpg', title : 'Image Credit: Sébastien Chiavassa', thumb : 'http://www.studioscparis.fr/home/css/img/botswana.jpg', url : 'http://www.studioscparis.com'},
                            {image : 'http://www.studioscparis.fr/home/css/img/centralpark.jpg', title : 'Image Credit: Sébastien Chiavassa', thumb : 'http://www.studioscparis.fr/home/css/img/centralpark.jpg', url : 'http://www.studioscparis.com'},
                            {image : 'http://www.studioscparis.fr/home/css/img/japon.jpg', title : 'Image Credit: Sébastien Chiavassa', thumb : 'http://www.studioscparis.fr/home/css/img/japon.jpg', url : 'http://www.studioscparis.com'},
                            {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Sébastien Chiavassa', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.studioscparis.com'},
                            {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Sébastien Chiavassa', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.studioscparis.com'}
                        ]
          
        });
        });
        
    </script>
    
  </head>
  
  <style type="text/css">
    ul#demo-block{ margin:0 15px 15px 15px; }
      ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('img/bg-black.png'); font:11px Helvetica, Arial, sans-serif; }
      ul#demo-block li a{ color:#eee; font-weight:bold; }
  </style>


</html>

<div class="myHomePage_links">
    <a href="index.php?/categories">Albums</a> ● <a href="index.php?/contact">Contact</a>
  </div>
 
<div class="myHomePage_name">
    <img src="css/img/logo.png" border="0" align="center" width=15% height=15% > 
  </div>
</div>

<style type="text/css">
#menubar {display:none !important;}
.titrePage {display:none}
.content {max-width:1120px; margin:0 auto 10px auto !important;}
.Online {display:none;}
.content_block {max-width:none;}
 
.myHomePage_photo {text-align: center; margin:50px 0 20px 0;}
.myHomePage_photo a img {border-width:2px; border-style:solid; border-color:#666;}
.myHomePage_links {letter-spacing:2px; margin-bottom:0; text-align:center; font-weight:bold; font-size: 24px;}
.myHomePage_name {margin-top:30px; letter-spacing:2px; text-align:center; font-size: 30px;}



</style>

Hors ligne

#10 2013-08-12 14:16:28

flop25
Équipe Piwigo
2006-07-06
6477

Re: Page d'accueil avec fond d'images

juste en passant: c’est du js ou javascript mais du java, ce qui est complètement autre chose ;)

mais merci pour le partage!

Dernière modification par flop25 (2013-08-12 14:16:55)

Hors ligne

  •  » Styles
  •  » Page d'accueil avec fond d'images

Pied de page des forums

Propulsé par FluxBB

github twitter facebook newsletter Faire un don Piwigo.org © 2002-2020 · Contact