Salut à Tous et à Toutes,
Je suis nouveau et j'espère trouver un réponse à mon blème, qui est le suivant :
J'ai un ti script qui récupère des images dans ma DB,
Puis au lieu de simplement les afficher dans un Div classique, avec ou pas une marquee,....
J'ai utilisé jquery pour faire un ti slide sympa.
Tout devrait etre "OK", mais voilà je pense que le overflow: hidden pose un big probleme:
Dans ce Slide, j'ai donc une suite de liens gérés dans des <li> un <ul>,
Les scripts qui vont bien, .... MAIS ! :
L'exemple que j'ai trouvé sur le net utilisai une suite de <li> pré définis,
Donc pas bon pour moi, j'ai donc intégré ce code à mon propre code <php>,
pour pouvoir utilisé une Variable dans l'adresse d'image de mes <li>, compris ?
je vous livre mes codes ,
[ 1 ] la base utilisée
[ 2 ] l'intégration dans mon code <php>
--------------------------------------------------------------------------------------
Nous avons donc ceci comme Base :::
http://img152.imageshack.us/img152/7387/20090413191331.jpg
et le code html simplissime :
ça c'est donc " La Base " ........... Maintenant Voici le code adapté à mes besoins ::::
Voici Tout D'Abord mon code <php> DANS LEQUEL j'ai intégré les css,
Parce que ces css me posent problème,
Du fait de l'utilisation d'adresses d'images que je dirai " variables ",
puisque récupérées dans ma DB, par un if ... while ... if .... blablabla ....
---------------------------------------------------------------------------------------
J'ai bien sur cherché, trifouillé, décortiqué, mais no il semble que le overflow: hidden pose problèmes :
css en link ou intégré, idem ....
j'ai trouvé à rajouter systématiquement un position: relative; AVEC mes overflow: hidden;
ce qui devrait régler un problème de compatibilité avec IE, mais no ,
Le Javascript marche parfaitement,
Les h ref et les list-styles-background aussi, tout est Ok,
A PART QUE L ON NE VOIT AUCUNE IMAGE , LOL
Voci une tite image :
http://img152.imageshack.us/img152/3362/20090413192751.jpg
Voilà , si un boss du code pass par là et m'aide à résoudre ce cruel probleme,
Ben c Tip Top , quoi
Modifié par alamandra (21 Apr 2009 - 15:31)
Je suis nouveau et j'espère trouver un réponse à mon blème, qui est le suivant :
J'ai un ti script qui récupère des images dans ma DB,
Puis au lieu de simplement les afficher dans un Div classique, avec ou pas une marquee,....
J'ai utilisé jquery pour faire un ti slide sympa.
Tout devrait etre "OK", mais voilà je pense que le overflow: hidden pose un big probleme:
Dans ce Slide, j'ai donc une suite de liens gérés dans des <li> un <ul>,
Les scripts qui vont bien, .... MAIS ! :
L'exemple que j'ai trouvé sur le net utilisai une suite de <li> pré définis,
Donc pas bon pour moi, j'ai donc intégré ce code à mon propre code <php>,
pour pouvoir utilisé une Variable dans l'adresse d'image de mes <li>, compris ?
je vous livre mes codes ,
[ 1 ] la base utilisée
[ 2 ] l'intégration dans mon code <php>
--------------------------------------------------------------------------------------
Nous avons donc ceci comme Base :::
http://img152.imageshack.us/img152/7387/20090413191331.jpg
[css]
/**************************************************************
Image Menu
v 2.2
**************************************************************/
#imageMenu {
position: relative;
width: 500px;
height: 200px;
overflow: hidden;
}
#imageMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 200px;
width: 1000px;
}
#imageMenu ul li {
float: left;
}
#imageMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:98px;
height: 200px;
}
#imageMenu ul li.landscapes a {
background: url(http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/landscapes.jpg) repeat scroll 0%;
}
#imageMenu ul li.people a {
background: url(http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/people.jpg) repeat scroll 0%;
}
#imageMenu ul li.nature a {
background: url(http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/nature.jpg) repeat scroll 0%;
}
#imageMenu ul li.urban a {
background: url(http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/urban.jpg) repeat scroll 0%;
}
#imageMenu ul li.abstract a {
background: url(http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/abstract.jpg) repeat scroll 0%;
width: 310px;
}
.clear {
clear: both;
}
/*************************************************************/
[/css]
et le code html simplissime :
<link href="_common/css/imageMenuindex.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="_common/js/mootools.js"></script>
<script type="text/javascript" src="_common/js/imageMenu.js"></script>
<div align="center" border="0" cellspacing="0" cellpadding="0">
<table width="1077" align="center" border="0"
style="background-url: ('_common/images/bgmain.gif');" height="293" cellspacing="0" cellpadding="0">
<tr>
<td width="1077" height="293" align="center" border="0" colspan="4" background="_common/images/MAINTABSRV5.gif">
<div align="center" border="0" cellspacing="0" cellpadding="0">
<div width="60" height="212" align="center" border="0"> </div>
<table border="0" width="830" height="212">
<tr>
<td height="206" width="860" rowspan="2" align="center" >
<div id="container">
<div id="example">
<div id="imageMenu" style="width: 860px; height: 200px">
<ul>
<li class="urban"><a href="multimedia.php">Urban</a></li>
<li class="abstract"><a href="upload.php">Abstract</a></li>
<li class="landscapes"><a href="account.php">Landscapes</a></li>
<li class="people"><a href="mailbox.php">People</a></li>
<li class="nature"><a href="tools.php">Nature</a></li>
<li class="urban"><a href="multimedia.php">Urban</a></li>
<li class="abstract"><a href="upload.php">Abstract</a></li>
<li class="landscapes"><a href="account.php">Landscapes</a></li>
<li class="nature"><a href="tools.php">Nature</a></li>
<li class="people"><a href="mailbox.php">People</a></li>
</ul>
</div>
<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
});
</script>
</div>
</div>
</td>
</tr>
<table>
</div>
</td>
</tr>
</table>
</div>
ça c'est donc " La Base " ........... Maintenant Voici le code adapté à mes besoins ::::
Voici Tout D'Abord mon code <php> DANS LEQUEL j'ai intégré les css,
Parce que ces css me posent problème,
Du fait de l'utilisation d'adresses d'images que je dirai " variables ",
puisque récupérées dans ma DB, par un if ... while ... if .... blablabla ....
<?php
require_once("backend/functions.php");
dbconn();
$site_config['LEFTNAV'] = false;
$site_config['RIGHTNAV'] = false;
loggedinonly();
stdhead("");
begin_frame("");
?>
<!--
<link href="http://www.alamandra-team-host.net/domaine/shortripv3/_common/css/imageMenu.css" rel="stylesheet" type="text/css">
-->
<script type="text/javascript" src="http://www.alamandra-team-host.net/domaine/shortripv3/_common/js/mootools.js"></script>
<script type="text/javascript" src="http://www.alamandra-team-host.net/domaine/shortripv3/_common/js/imageMenu.js"></script>
<style type="text/css" >
#imageMenu {
position: relative;
width: 500px;
height: 200px;
}
#imageMenu ul {
margin: 0px;
display: block;
height: 200px;
width: 1000px;
}
#imageMenu ul li {
float: left;
}
#imageMenu ul li a {
text-indent: -1000px;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
width:98px;
height: 200px;
}
#imageMenu ul li.all a { background: url('http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]'
repeat scroll 0%;
}
</style>
<div align="center" border="0" cellspacing="0" cellpadding="0">
<table width="1077" align="center" border="0"
style="background-url: ('http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/bgmain.gif');" height="293" cellspacing="0" cellpadding="0">
<tr>
<td width="1077" height="293" align="center" border="0" colspan="4" background="http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/MAINTABSRV5.gif">
<div align="center" border="0" cellspacing="0" cellpadding="0">
<div width="60" height="212" align="center" border="0"> </div>
<table border="0" width="830" height="212">
<tr>
<td height="206" width="860" rowspan="2" align="center" >
<div id="container">
<div id="example">
<div id="imageMenu" style="width: 860px; height: 200px">
<ul>
<?
$news = mysql_query("SELECT id, name, added, image1, image2 FROM torrents WHERE banned = 'no' AND visible='yes'");
if (mysql_num_rows($news) > 0) {
while ($row2 = mysql_fetch_array($news, MYSQL_NUM)) {
$tor = $row2['0'];
$altname = $row2['1'];
$date_time=get_date_time(time()-(3600*1280)); // the 24 is the hours you want listed change by whatever you want
$orderby = "ORDER BY torrents.id DESC"; //Order
$limit = "LIMIT 9"; //Limit
$where = "WHERE banned = 'no' AND visible='yes' AND torrents.id='$tor'";
$res = mysql_query("SELECT torrents.id, torrents.image1, torrents.image2, torrents.added, categories.name AS cat_name FROM torrents LEFT JOIN categories ON torrents.category = categories.id $where AND torrents.added >='$date_time' $orderby $limit");
$row = mysql_fetch_array($res);
$cat = $row['cat_name'];
$img1 = "<a href='$site_config[SITEURL]/torrents-details.php?id=$row[id]'><img border='0' src='uploads/images/$row[image1]' alt=\"$altname / $cat\" width='160' align'center'></a>";
if ($row["image1"] != "") {
$imgslide = "<li style=\"list-style-image: url('http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]')\"><a href=\"$site_config[SITEURL]/torrents-details.php?id=$row[id]\"></a></li>";
print("". $imgslide ."");
}
}
}
?>
</ul>
</div>
<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
});
</script>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
<?
end_frame();
stdfoot();
?>
---------------------------------------------------------------------------------------
J'ai bien sur cherché, trifouillé, décortiqué, mais no il semble que le overflow: hidden pose problèmes :
css en link ou intégré, idem ....
j'ai trouvé à rajouter systématiquement un position: relative; AVEC mes overflow: hidden;
ce qui devrait régler un problème de compatibilité avec IE, mais no ,
Le Javascript marche parfaitement,
Les h ref et les list-styles-background aussi, tout est Ok,
A PART QUE L ON NE VOIT AUCUNE IMAGE , LOL
Voci une tite image :
http://img152.imageshack.us/img152/3362/20090413192751.jpg
Voilà , si un boss du code pass par là et m'aide à résoudre ce cruel probleme,
Ben c Tip Top , quoi
Modifié par alamandra (21 Apr 2009 - 15:31)
\" width=\"500\" height=\"200\"';
\"><img src=\"$fondimage\"></a></li>";
