diaporama sur kompozer

hugues84 · Message par **hugues84** » 11 nov. 2010, 08:48

Bonjour
j'ai mon site, créé avec DREAMWEAVER (trop lourd pour moi, et ayant parfois des réactions inattendus )puis repris avec KOMPOZER, le seul que j'ai trouvé pouvant récupérer toutes mes pages.
http://www.masdesmelons.com
Je souhaite maintenant rajouter quelques diaporama pour éviter les quantités de photos affichés les une derrière les autres.
après de multiples essais avec Photoshop (automatisation, diopo Web), JQUEry, simpleviewer, et autres bout de logiciel permettant la création des diapo java ou autres et après intégration de toutes les dossier et pages html dans mes pages, pas moyen des les faire afficher dans mon site.

Avez vous une astuce pour moi, je suis démoralisé avec toutes ces soirées passées !
Question
Soit changer Kompozer pas un autre éditeur intégrant l'ajout de diaporama, ou avoez vous l'astuce pour intégrer JQUERY qui correspond parfaitement a ce que je veux faire.
merci de votre aide.

tchoutchelo · Message par **tchoutchelo** » 19 nov. 2010, 02:21

Après avoir pas mal galéré aussi et essayé un tas de solutions je viens de découvrir Image HTML Integrator. C'est simple et efficace.
Voilà une piste peut-être...bonne chance

Message par **chinon37** » 19 nov. 2010, 08:43

Bof, image html integrator me parait bien moins "friendly" que jalbum par exemple. Et pour quelques photos, kompoZer devrait largement suffire.

Il existe un livre "KompoZer, Apprenez, pratiquez, créez" de Jean Marc Juin, chez Pearson (isbn: 978-7440-2346-0) qui explique, entre autre, la réalisation pas à pas d'une galerie qualifiée de "pro". Ce livre est un investissement de 19 euros peut être, mais il aborde de façon simple et détaillée tout ce qu'on peut faire avec KompoZer (et puis 19 euros pour un logiciel qui vous est offert... mais vous pouvez toujours verser une obole aussi au développeur, Kaze

)

hugues84 · Message par **hugues84** » 20 nov. 2010, 10:29

Bonjour

OK pour le conseil.
Je veux bien passer par Jalbum, mais comment intégrer la galerie dans ma page Web
Je souhaite obtenir ce genre de chose :
http://www.clos-mirabel.com/locations/2 ... s-meublees

merci de votre aide

Message par **chinon37** » 20 nov. 2010, 14:30

Pour adapter Jalbum au design de ta page, tout dépend du "skin" de Jalbum que tu choisis.
Quelle galerie souhaites-tu intégrer?

hugues84 · Message par **hugues84** » 22 nov. 2010, 23:54

Voici ma page dans la quelle je souhaite intégrer le diapo plus bas:

Code : Tout sélectionner

<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
<title>Mas des Melons belle Provence</title>
<style type="text/css"><!--
body {
background-image: url(../bandeau_haut_ok.jpg);
background-repeat: no-repeat;
background-color: #FFFFFF;
margin-right: 0px;
margin-left: 0px;
margin-top: 275px;
margin-bottom: 0px;
}

-->
</style>
<style type="text/css">
</style>
</head>
<body>
<div
style="position: absolute; left: 40px; top: 116px; font-family: Verdana; font-weight: bold; width: 580px; color: white;"><font
size="+2">Cavaillon, idéalement situé<br />
pour découvrir les plus<br />
beaux sites de Provence !</font></div>
<div
style="position: absolute; left: 38px; top: 42px; font-family: Verdana; color: rgb(102, 51, 102); width: 667px; font-weight: bold;"><big><font
size="+3"><big>Mas des Melons</big></font></big></div>
<br />
<br />
<div
style="position: absolute; left: 74px; top: 262px; width: 360px; height: 329px;">&nbsp;ICI
MON DIAPORAMA<br />
</div>
<div
style="position: absolute; left: 602px; top: 262px; width: 185px; height: 340px;">ICI
je decrit etc etc<br />
tot<br />
</div>
</body>
</html>

Et ici ce que me donne Jalbum, comment l'intégrer dans la "div " en pos absolue si possible.
merci de votre aide, je n'y arrive pas

Code : Tout sélectionner

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- saved from url=(0014)about:internet -->
<title>FR_diapo_belle_provence</title>
<meta name="unf" content="fun" />
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<meta name="title" content="FR_diapo_belle_provence" />
<meta name="medium" content="mult" />
<meta name="keywords"
content="FR_diapo_belle_provence, FR_diapo_belle_provence, Jalbum 8.12, Galleria" />
<meta name="description" content="FR_diapo_belle_provence" />
<meta property="og:image" content="thumbs/FR_gordes.jpg" />
<meta property="og:title" content="FR_diapo_belle_provence" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Jalbum" />
<meta property="fb:app_id" content="140299612674733" />
<link rel="image_src" href="thumbs/FR_gordes.jpg" />
<link href="res/galleria/galleria.css" rel="stylesheet"
type="text/css" />
<link href="res/index.css" rel="stylesheet" type="text/css" />
<link href="res/common.css" rel="stylesheet" type="text/css" />
<link href="res/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.thumbnails li {
width: 40px;
height: 30px;
}

#middle_container {
height: 280px;
}

#scroller_container {
margin-top: 20px;
margin-bottom: 10px;
width: 406px;
}

#image_scroller {
margin: 0 10px 0 20px;
width: 336px;
}

#thumbnails_container {
width: 336px;
}

#scroller_container,
#image_scroller,
#thumbnails_container {
height: 56px;
}

#folders_container {
;
}

.folders {
width: 0px;
}

.folders li {
width: 56px;
height: 46px;
}

.caption,
.description {
width: 336px;
}
</style>
<script src="res/jquery.js" type="text/javascript" />
<script src="res/jquery.hotkeys.js" type="text/javascript" />
<script src="res/galleria/jquery.galleria.js" type="text/javascript" />
<script src="res/jquery.scrollimages.js" type="text/javascript" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
$(function() {
$("#thumbnails_container").imageScroller({
onBeforeScroll: function() { $.galleria.stop() },
onScroll: function() { $.galleria.start() },
duration: 120,
imageWidth: 56,
size: 6,
fastSteps: 5
});

var formattedThumbnailOpacity = 67/100;

$(".thumbnails_unstyled").addClass("thumbnails");
$("ul.thumbnails").galleria({
history: true,
clickNext: true,
insert: "#main_image",
onImage: function(image, caption, thumb) {
var extras = $("#extras").css("display", "none").empty();
image.css("display", "none").fadeIn(244);
caption.css("display", "none").fadeIn(244);

if (false) {
var extrasList = $("<ul></ul>");
extrasList.addMetadata("Date", thumb.data("originalDate"));
extrasList.addMetadata("Camera", thumb.data("cameraModel"));
extrasList.addMetadata("Exposure time", thumb.data("exposureTime"));
extrasList.addMetadata("ISO", thumb.data("isoEquivalent"));
extrasList.addMetadata("Aperture", thumb.data("aperture"));
extrasList.addMetadata("Focus distance", thumb.data("focusDistance"));
extrasList.addMetadata("Focal length", thumb.data("focalLength35mm"));
extrasList.addMetadata("Keywords", thumb.data("keywords"));
if (extrasList.children().length > 0) {
extras.append(extrasList);
extrasList.find(":first-child").addClass("first");
extras.css({
width : (image.outerWidth() - (5 * 2) + 100) + "px"
}).fadeIn(244);
}
}

var li = thumb.parents("li");
li.siblings().children("img.selected").fadeTo(500, formattedThumbnailOpacity);
thumb.fadeTo("fast", 1).addClass("selected");
image.attr("title", "Next image");

var original = thumb.data("original");
if (original) {
var originalLink = $("<a></a>").attr("href", original).text("Download original");
caption.append(" (").append(originalLink).append(")");
}
},
onThumb: function(thumb) {
var li = thumb.parents("li");
var fadeTo = li.is(".active") ? "1" : formattedThumbnailOpacity;
thumb.css({display: "none", opacity: fadeTo}).fadeIn(1500);
thumb.hover(
function() {
thumb.fadeTo("fast", 1);
},
function() {
li.not(".active").children("img").fadeTo("fast", formattedThumbnailOpacity);
}
)
},
preloads: 3,
fastSteps: 5,
onPrev: function() {
$.imageScroller.scrollLeft();
},
onNext: function() {
$.imageScroller.scrollRight();
},
onPrevFast: function() {
$.imageScroller.fastScrollLeft();
},
onNextFast: function() {
$.imageScroller.fastScrollRight();
}
});

$.galleria.loader = $("<div></div>").addClass("loader").append($(new Image()).attr("src","res/loader.gif").attr("title","Loading..."));

prepareArrow = function(arrow) {
arrow.css({display: "none", opacity: 0.5, "padding-top": "3px"}).fadeIn( 1000);
arrow.hover(
function() {
arrow.fadeTo("fast", 1);
},
function() {
arrow.fadeTo("fast", 0.5);
}
);
}

var leftArrow = $("#left_arrow");
prepareArrow(leftArrow);
leftArrow.click(function() {
$.galleria.prev();
});

var rightArrow = $("#right_arrow");
prepareArrow(rightArrow);
rightArrow.click(function() {
$.galleria.next();
});

if (false) {
var leftFastArrow = $("#left_fast_arrow");
prepareArrow(leftFastArrow);
leftFastArrow.click(function() {
$.galleria.prevFast();
});

var rightFastArrow = $("#right_fast_arrow");
prepareArrow(rightFastArrow);
rightFastArrow.click(function() {
$.galleria.nextFast();
});
}
});

$(document).bind("keydown", "left", function() {
if (!KeyboardNavigation.widgetHasFocus()) {
$.galleria.prev();
}
});
$(document).bind("keydown", "right", function() {
if (!KeyboardNavigation.widgetHasFocus()) {
$.galleria.next();
}
});

var KeyboardNavigation = {
widgetHasFocus: function() {
if(typeof _jaWidgetFocus != 'undefined' && _jaWidgetFocus) {
return true;
}
return false;
}
}
//--><!]]></script>
<link rel="alternate" href="album.rss" type="application/rss+xml" />
</head>
<body>
<div id="header">
<div id="top_container">
<h1>FR_diapo_belle_provence</h1>
</div>
</div>
<div id="main">
<div id="scroller_container"> <img class="hide" id="left_arrow"
src="res/left.png" alt="Scroll left" title="Scroll left" />
<div id="image_scroller">
<ul id="thumbnails_container" class="thumbnails_unstyled">
<li class="active"> <a href="slides/FR_gordes.jpg" title=""> <img
src="thumbs/FR_gordes.jpg" alt="" title=""
style="width: 40px; height: 30px;" /> </a> <span>width:400;;height:249</span>
</li>
<li class=""> <a href="slides/FR_isle_sorgue.jpg" title=""> <img
src="thumbs/FR_isle_sorgue.jpg" alt="" title=""
style="width: 40px; height: 30px;" /> </a> <span>width:400;;height:249</span>
</li>
<li class=""> <a href="slides/FR_marches.jpg" title=""> <img
src="thumbs/FR_marches.jpg" alt="" title=""
style="width: 40px; height: 30px;" /> </a> <span>width:400;;height:250</span>
</li>
<li class=""> <a href="slides/FR_roussillon.jpg" title=""> <img
src="thumbs/FR_roussillon.jpg" alt="" title=""
style="width: 40px; height: 30px;" /> </a> <span>width:400;;height:250</span>
</li>
<li class=""> <a href="slides/FR_st_remy.jpg" title=""> <img
src="thumbs/FR_st_remy.jpg" alt="" title=""
style="width: 40px; height: 30px;" /> </a> <span>width:400;;height:250</span>
</li>
<li class=""> <a href="slides/FR_villages_perches.jpg" title=""> <img
src="thumbs/FR_villages_perches.jpg" alt="" title=""
style="width: 40px; height: 30px;" /> </a> <span>width:400;;height:249</span>
</li>
</ul>
<div class="clear" />
</div>
<img class="hide" id="right_arrow" src="res/right.png"
alt="Scroll right" title="Scroll right" />
<div class="clear" />
</div>
<div class="clear" />
<div id="middle_container">
<div id="main_image" />
<div id="extras" />
</div>
<div class="clear" />
</div>
<div class="clear" />
<div id="footer">
<p id="bottom_container"> Photo album created with <a
href="http://jalbum.net" target="_blank" title="Jalbum 8.12">Jalbum
8.12</a> and <a href="http://jalbum.net/skins/skin/Galleria"
title="Galleria">Galleria</a>.<br />
Create <a href="http://jalbum.net/software" target="_blank">web photo
albums</a> and <a target="_blank" href="http://jalbum.net/photo-book">photo
books</a> with Jalbum. </p>
</div>
<div id="jalbumwidgetcontainer" />
<script type="text/javascript" charset="utf-8"><!--//--><![CDATA[//><!--
_jaSkin = "Galleria";
_jaStyle = "Dark.css";
_jaVersion = "8.12.2";
_jaGeneratorType = "desktop";
_jaLanguage = "fr";
_jaPageType = "index";
_jaRootPath = ".";
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://jalbum.net/widgetapi/load.js";
document.getElementById("jalbumwidgetcontainer").appendChild(script);
//--><!]]></script>
</body>
</html>

Message par **chinon37** » 23 nov. 2010, 11:40

ce que tu veux faire, c'est inclure la page jalbum dans une autre page. C'est le principe des frames , système déconseillé et dépassé.
je te conseillerais plutôt de partir de ta page jalbum et de la personnaliser. Il est très facile d'ajouter des div ou autres h1, h2, etc... à partir des fichiers html générés par Jalbum.

hugues84 · Message par **hugues84** » 24 nov. 2010, 18:25

bonsoir
non, je ne veux pas faire de frame.
je veux simplement mettre le diaporama dans ma page, dans une div et non inserer la page du diaporama dans la miene ou refaire une page complette autour du diaporama.
j'ai du mal à comprendre pourquoi il est si facile d'inserrer une photo, mais si difficile d'inserrer un diaporama.
Mon probleme est que dès que je touche au diapo Jalbum, il ne marche plus.
et je ne veux pas qu'il soit centré mais à gauche, que le font noir soit restreins à la div et non sur toute la page, etc...
pas compliqué, quoi !
il serai si simple que compozer propose l'insertion d'un diaporama !
bref, j'ai toujour pas de solution, et je doit mettre mon site en ligne.
peux tu m'aider ?
Je veux ça : http://www.clos-mirabel.com/locations/2 ... s-meublees
merci beaucoup

Message par **chinon37** » 24 nov. 2010, 20:55

hugues84 a écrit : il serai si simple que compozer propose l'insertion d'un diaporama !
bref, j'ai toujour pas de solution, et je doit mettre mon site en ligne.
peux tu m'aider ?
Je veux ça : http://www.clos-mirabel.com/locations/2 ... s-meublees
merci beaucoup

Entre le je veux et je peux, il y a un monde!
Avec KompoZer, il est possible de faire un diaporama, comme je l'ai dit dès le début:

Il existe un livre "KompoZer, Apprenez, pratiquez, créez" de Jean Marc Juin, chez Pearson (isbn: 978-7440-2346-0) qui explique, entre autre, la réalisation pas à pas d'une galerie qualifiée de "pro"

Mais il faut mettre la main à la pâte! KompoZer est un outil développé gracieusement, et mis à disposition gracieusement également. Et les dons qui peuvent être fait au développeur sont loin d'être au niveau du nombre d'utilisateurs de KompoZer!! Mais pour l'instant, KompoZer ne propose pas du tout cuit. Cependant l'interface de KpZ permet ce que tu souhaites.
Quant à faire à ta place, je n'en ai pas le temps et c'est le cas de la plupart des intervenants de ce forum: nous avons un travail (souvent très éloigné de KompoZer) et si nous sommes prêts à dépanner les utilisateurs de KpZ quand ils coincent sur certains points, nous ne sommes pas prêts à faire des cours complets.
Cependant, certains mieux intentionnés que d'autres ont tout de même mis à disposition des tutoriels (ou cours) qui facilitent grandement la tâche et les apprentissages. On les trouvent à partir de cette page: http://www.geckozone.org/forum/viewtopi ... 20&t=20704
Les deux premiers sont déjà admis comme étant de petites références. J'en connais même qui réagissent plus vite que Lucky Luke quand on leur demande d'ajouter un point. Le diaporama fera peut être l'objet d'un prochain chapitre... en demandant gentiment!

Geckozone

diaporama sur kompozer

diaporama sur kompozer

Re: diaporama sur kompozer

Re: diaporama sur kompozer

Re: diaporama sur kompozer

Re: diaporama sur kompozer

Re: diaporama sur kompozer

Re: diaporama sur kompozer

Re: diaporama sur kompozer

Re: diaporama sur kompozer

Qui est en ligne ?