Piwigo.org

SCH · 2013-08-06 09:08:09

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)

ddtddt · 2013-08-06 09:11:57

Bonjour,

le liens renvois sur le forum ;-)

Miklfe · 2013-08-06 11:51:24

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

SCH · 2013-08-07 11:38:52

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 ;)

Miklfe · 2013-08-07 13:08:04

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).
@+

SCH · 2013-08-07 14:27:37

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.

Miklfe · 2013-08-07 15:12:53

#theHomePage #copyright{display:none;}

patfrwar · 2013-08-08 10:04:32

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

SCH · 2013-08-12 13:41:32

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>

flop25 · 2013-08-12 14:16:28

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)

Piwigo.org

Annonce

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

Page d'accueil avec fond d'images

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

Re: Page d'accueil avec fond d'images

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

Re: Page d'accueil avec fond d'images

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

Re: Page d'accueil avec fond d'images

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

Re: Page d'accueil avec fond d'images

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

Re: Page d'accueil avec fond d'images

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

Re: Page d'accueil avec fond d'images

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

Re: Page d'accueil avec fond d'images

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

Re: Page d'accueil avec fond d'images

Code:

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

Re: Page d'accueil avec fond d'images

Pied de page des forums