(1) 2 3 4 ... 10 »
imagehover
Pascal C.
Pascal C.

imagehover

Pascal C. 431
19/10/2021 15:36
#1
Pascal C. 431
19/10/2021 15:36
Salut re-salut....

je souhaite utiliser les imagehover du script suivant : https://imagehover.io/#download
J'ai tenté d'installer cela selon la technique d'Alain avec le dossier vendor décrit dans le tuto des fontes Awesome.

ça fonctionne parfaitement sur une page html, mais pas lorsque je souhaite l'intégrer à xoops.
voici ma page test qui fait le job en html : http://www.lumieresdefrance.com/shots/h/index2.html



Voici la description complète de ma démarche, et je ne pense pourtant pas m'être planté cette fois :

- Script complet décompressé et placé dans le dossier montheme/imagehover/ dans lequel se retrouvent donc les dossiers css ; scss ; ainsi que les divers fichiers.

-dans le dossier montheme/theme.tpl, j'ai rajouté le lien vers mon css entre les balises head comme cela :
<!-- imagehover -->
               <
link href="<{xoImgUrl}>imagehover/css/imagehover.min.css" rel="stylesheet" media="all">



Puis dans Xmnews, je crée un article dans lequel j'écris en html mon code (qui est le même que celui de ma page html qui fonctionne bien) :
<figure class="imghvr-hinge-right">
    <
img src="example-image.jpg">
    <
figcaption>
        
// Hover Content
    
</figcaption>
    <
a href="#"></a>
</
figure>

<
figure class="imghvr-hinge-right">
    <
img src="http://www.lumieresdefrance.com/phpv2/acontenu/img/v_x1.jpg">
    <
figcaption>
        
// Hover Content
    
</figcaption>
    <
a href="#"></a>
</
figure>



Et là, on dirait que le lien vers mon fichier css ne se fait pas.
Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 610
19/10/2021 16:17
#2
Alain T 610
19/10/2021 16:17
Hello,
merci pour ce nouveau sujet fort intéressant !
Je ne connaissais pas cette librairie, elle est très sympa, belle trouvaille.

Et merci aussi d'appliquer et surtout adapter la méthode que je propose dans le tuto :
Utiliser les icônes Font Awesome dans un thème XOOPS.

Bon, j'ai regardé rapidement, tout semble correcte.
Maintenant, tu viens de changer des éléments dans ton fichier theme.tpl,
tente de vider le cache de ton navigateur pour voir si cela règle le problème.

Ensuite, affiche la source de ta page et clique sur chacun des fichiers css que tu vois dans la source de ta page.
Cela te permettra de voir rapidement si ta page peut bien atteindre les fichiers attendus.
Est-ce clair, ce que je t'écris là ?
Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 610
19/10/2021 22:20
#3
Alain T 610
19/10/2021 22:20
Bon,
J'ai essayé cette belle librairie sur mon site de tests en local
et...
tout fonctionne.

Mon code :
Fichier theme.tml
<link rel="stylesheet" href="<{xoImgUrl}>vendor/imagehover/css/imagehover.min.css">


Contenu d'un article xmnews :
<figure class="imghvr-hinge-right">
    <
img src="http://www.lumieresdefrance.com/phpv2/acontenu/img/v_x1.jpg">
    <
figcaption>
       
texte Alain
    
</figcaption>
    <
a href="#"></a>
</
figure>


Donc oui, tout fonctionne, tu as du faire une faute de frappe quelque part !
Re : imagehover
Pascal C.
Pascal C.

Re : imagehover

Pascal C. 431
20/10/2021 08:14
#4
Pascal C. 431
20/10/2021 08:14
Désolé, j'avais oublié de cocher la notification, du coup je n'avais pas vu ta réponse.

Donc ma démarche serait la bonne, c'est déja ça.
Je vais donc revoir cela et tâcher de trouver mon erreur.

Merci Alain
Re : imagehover
Pascal C.
Pascal C.

Re : imagehover

Pascal C. 431
20/10/2021 09:15
#5
Pascal C. 431
20/10/2021 09:15
Bon, bien je ne comprends pas.

J'ai tout recommencé du départ (en mettant tout sous le dossier vendor, plutôt que directement sous imagehover afin d'être exactement comme toi cette fois ! Donc j'ai :

- Renvoyé toute l'archive décompressée sous montheme/vendor/imagehover
- Rajouté le lien vers mon css comme suit :

<!-- imagehover -->
    <
link rel="stylesheet" href="<{xoImgUrl}>vendor/imagehover/css/imagehover.min.css">
        
        <!-- 
Font Awesome Solid Brands -->
    <
link rel="stylesheet" type="text/css" href="<{xoImgUrl}>vendor/fontawesome-free-5/css/fontawesome.min.css">
    <
link rel="stylesheet" type="text/css" href="<{xoImgUrl}>vendor/fontawesome-free-5/css/solid.min.css">
    <
link rel="stylesheet" type="text/css" href="<{xoImgUrl}>vendor/fontawesome-free-5/css/brands.min.css">
        
</
head>


- J'ai copié ton code dans mon article (pour être certain de ne pas avoir fait d'erreur)

Et cela ne fonctionne pas !

Tu peux voir ce que j'obtiens ici : http://lumieresdefrance.com/phpv2/mod ... ws/article.php?news_id=22
login : test / pass : test

Et lorsque je fais clic droit => inspecter sous chrome (je pense que c'est ce que tu me disais de faire dans ton 1er post) ,

je vois bien la ligne :
<link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/font-awesome.min.css" rel="stylesheet">


mais pas celle vers imagehover
comment cela est-il possible alors que j'ai bien mis cette ligne dans mon theme.tpl ???
Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 610
20/10/2021 09:33
#6
Alain T 610
20/10/2021 09:33
Pour le login/mdp,
Comme le forum est accessible à tous, je te conseille de le modifier et de me l'envoyer en MP sauf si ça ne te pose pas de problème que n'importe qui puisse voir ton site.

Non, pas "inspecter", voir la source.
J'avais indiqué :
Citation :
Ensuite, affiche la source de ta page et clique sur chacun des fichiers css que tu vois dans la source de ta page.

Pour la suite,
moi je vois bien la ligne
<!-- imagehover -->
    <
link rel="stylesheet" href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/vendor/imagehover/css/imagehover.min.css">

via view-source:http://lumieresdefrance.com/phpv2/mod ... ws/article.php?news_id=22
et quand je clique sur ce lien, je vois bien le contenu du fichier, donc le chemin est correct.
http://lumieresdefrance.com/phpv2/the ... er/css/imagehover.min.css
le système ouvre le fichier css.

Mais effectivement, ça ne fonctionne pas...
Je réfléchie pourquoi...
Hier soir, quand je l'ai fait, ça m'a pris moins de 3mn pour le faire et tout a fonctionné, c'est fou.
Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 610
20/10/2021 09:52
#7
Alain T 610
20/10/2021 09:52
Oula,
en regardant un peu plus en détail la source de ton fichier, je vois ceci :

<body id="xmnews">

<!-- 
nettuts -->
<!-- 
traduit et adapté par outils-web.com -->
<!-- 
chargement des feuilles de style -->
<
meta charset="UTF-8">

<!-- 
NORMALIZE.CSS -->
    <
link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/normalize.css" rel="stylesheet">
    <!-- 
FontAwesome CSS -->
    <
link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/font-awesome.min.css" rel="stylesheet">
    <!-- 
IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <
link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<
link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ruby-theme-10.css" rel="stylesheet">
    <!-- IF 
YOU WANT TO USE BOOTSTRAPBOOTSTRAP STYLES LINK POSITION MUST BE HERE BELOW -->
    <
link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/bootstrap.min.css" rel="stylesheet">

    <!-- 
ruby Main -->
    <
link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ruby-main.css" rel="stylesheet">
    <!-- 
ruby Vertical -->
    <
link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ruby-vertical.css" rel="stylesheet">
    <!-- 
ruby Demo - FOR DEMO SHOWCASE ONLY! -->
    <
link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ruby-demo.css" rel="stylesheet">
    <!-- 
ruby Vertical -->
    <
link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ruby-transitions.css" rel="stylesheet" id="ruby-transitions">
    <!-- 
ruby Responsive -->
    <
link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ruby-responsive.css" rel="stylesheet">
    <!-- 
font Open-Sans -->
    <
link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,700' rel='stylesheet' type='text/css'>
    <!-- 
HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if 
lt IE 9]>
      <
script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <
script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <
style>
    
/* FOR THIS DEMO ONLY, HIDE VERTICAL MENU ON MOBILE */
    
@media(max-width:767px){
      
div.ruby-wrapper.ruby-vertical {
        
displaynone;
      }
    }
    </
style>
  </
head>

  <
body>


Donc il y a un < body > ouvrant puis des déclarations CSS puis un nouveau < body > ouvrant...

C'est pas beau, ça...
Re : imagehover
Pascal C.
Pascal C.

Re : imagehover

Pascal C. 431
20/10/2021 10:21
#8
Pascal C. 431
20/10/2021 10:21
Je ne connaissais pas la commande view-source:
J'ai encore appris un truc

Sinon, il serait dans quel fichier ce <body> ?
j'ai examiné nav-menu.tpl et theme.tpl dans lesquels j'ai pas mal collé mais mouffles et ne trouve pas de <body> sans </body>

Cela ne peut pas être la cause de mon soucis, si ?
Re : imagehover
Alain T
Alain T

Re : imagehover

Alain T 610
20/10/2021 10:30
#9
Alain T 610
20/10/2021 10:30
Sur Google Chrome, pas besoin de taper quoi que ce soit,
[Bouton droit] sur la page concernée puis [Afficher le code source de la page]

Pour ton soucis,
je ne sais pas si cela a une influence ou pas mais en tout cas, ton fichier généré n'est pas bon du tout.
Et tu cherches mal.

Ton problème, je te l'ai indiqué viens des déclarations CSS APRES le 1er body < ouvrant >
Or on voit
<!-- nettuts -->
<!-- 
traduit et adapté par outils-web.com -->
<!-- 
chargement des feuilles de style -->

Donc si ce n'est pas dans ton theme.tpl, tu dois avoir quelque part un include d'un fichier contenant notamment ce texte.

Donc il faut commencer par mettre les balises au bon endroit.

Déclaration CSS : dans les balises < head>
Un seul < body > ouvrant pour finir tout à la fin avec une balise fermante.

Allez, au boulot,
et ça , ce n'est pas du XOOPS, c'est du PHP/HTML.
Re : imagehover
Pascal C.
Pascal C.

Re : imagehover

Pascal C. 431
20/10/2021 10:44
#10
Pascal C. 431
20/10/2021 10:44
Bien je suis pas plus fort en html / php que sous Xoops en fait, ceci explique d'ailleurs cela.

Bref, ces lignes apparaissent uniquement dans mon nav-menu.tpl et je trouve qu'un seul < body > qui est bel est bien refermé à la fin.

En regardant mieux, je m'aperçoit que j'ai un </head> mais pas de <head> dans mon fichier