1. Accueil
  2. Question et réponse
  3. Affichage des images en ligne

Affichage des images en ligne

2017-07-02 1 views
0

Je voulais juste vous demander d'avoir récupéré des images de la base de données, mais elles ne montrent pas en ligne, ce qui pourrait être une solution possible? Merci! Les images sont affichées correctement, mais le même problème se reproduit encore et encore! Lorsque je tente de mettre des images à partir d'une URL qu'ils affichent en ligne, mais maintenant la base de données sonAffichage des images en ligne

enter code here 
<?php 
    include 'navbar.php'; 
    require_once('admin/connect.php'); 
?> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>Couture Collection</title> 
      <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

     <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</head> 
<body> 
<?php 
include 'middle.php'; 
?> 
<br> 
<style type="text/css"> 
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300); 
body { 
    color: #333; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 300; 
} 
h1, 
h1+p { 
    margin: 30px 15px 0; 
    font-weight: 300; 
} 
h1+p a { 
    color: #333; 
} 
h1+p a:hover { 
    text-decoration: none; 
} 
h2 { 
    margin: 60px 15px 0; 
    padding: 0; 
    font-weight: 300; 
} 
h2 span { 
    margin-left: 1em; 
    color: #aaa; 
    font-size: 85%; 
} 
.column { 
    margin: 15px 15px 0; 
    padding: 0; 
} 
.column:last-child { 
    padding-bottom: 60px; 
} 
.column::after { 
    content: ''; 
    clear: both; 
    display: block; 
} 
.column div { 
    position: relative; 
    float: left; 
    width: 300px; 
    height: 200px; 
    margin: 0 0 0 25px; 
    padding: 0; 
} 
.column div:first-child { 
    margin-left: 0; 
} 
.column div span { 
    position: absolute; 
    bottom: -20px; 
    left: 0; 
    z-index: -1; 
    display: block; 
    width: 300px; 
    margin: 0; 
    padding: 0; 
    color: #444; 
    font-size: 18px; 
    text-decoration: none; 
    text-align: center; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
    opacity: 0; 
} 
figure { 
    width: 300px; 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    background: #fff; 
    overflow: hidden; 
} 
figure:hover+span { 
    bottom: -36px; 
    opacity: 1; 
} 



/* Zoom In #1 */ 
.hover01 figure img { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover01 figure:hover img { 
    -webkit-transform: scale(1.3); 
    transform: scale(1.3); 
} 

/* Zoom In #2 */ 
.hover02 figure img { 
    width: 300px; 
    height: auto; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 

} 
.hover02 figure:hover img { 
    width: 350px; 
} 

/* Zoom Out #1 */ 
.hover03 figure img { 
    -webkit-transform: scale(1.5); 
    transform: scale(1.5); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover03 figure:hover img { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
} 

/* Zoom Out #2 */ 
.hover04 figure img { 
    width: 400px; 
    height: auto; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover04 figure:hover img { 
    width: 300px; 
} 

/* Slide */ 
.hover05 figure img { 
    margin-left: 30px; 
    -webkit-transform: scale(1.5); 
    transform: scale(1.5); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover05 figure:hover img { 
    margin-left: 0; 
} 

/* Rotate */ 
.hover06 figure img { 
    -webkit-transform: rotate(15deg) scale(1.4); 
    transform: rotate(15deg) scale(1.4); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover06 figure:hover img { 
    -webkit-transform: rotate(0) scale(1); 
    transform: rotate(0) scale(1); 
} 

/* Blur */ 
.hover07 figure img { 
    -webkit-filter: blur(3px); 
    filter: blur(3px); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover07 figure:hover img { 
    -webkit-filter: blur(0); 
    filter: blur(0); 
} 

/* Gray Scale */ 
.hover08 figure img { 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover08 figure:hover img { 
    -webkit-filter: grayscale(0); 
    filter: grayscale(0); 
} 

/* Sepia */ 
.hover09 figure img { 
    -webkit-filter: sepia(100%); 
    filter: sepia(100%); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover09 figure:hover img { 
    -webkit-filter: sepia(0); 
    filter: sepia(0); 
} 

/* Blur + Gray Scale */ 
.hover10 figure img { 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover10 figure:hover img { 
    -webkit-filter: grayscale(100%) blur(3px); 
    filter: grayscale(100%) blur(3px); 
} 

/* Opacity #1 */ 
.hover11 figure img { 
    opacity: 1; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover11 figure:hover img { 
    opacity: .5; 
} 

/* Opacity #2 */ 
.hover12 figure { 
    background: #1abc9c; 
} 
.hover12 figure img { 
    opacity: 1; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover12 figure:hover img { 
    opacity: .5; 
} 

/* Flashing */ 
.hover13 figure:hover img { 
    opacity: 1; 
    -webkit-animation: flash 1.5s; 
    animation: flash 1.5s; 
} 
@-webkit-keyframes flash { 
    0% { 
     opacity: .4; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
@keyframes flash { 
    0% { 
     opacity: .4; 
    } 
    100% { 
     opacity: 1; 
    } 
} 

/* Shine */ 
.hover14 figure { 
    position: relative; 
} 
.hover14 figure::before { 
    position: absolute; 
    top: 0; 
    left: -75%; 
    z-index: 2; 
    display: block; 
    content: ''; 
    width: 50%; 
    height: 100%; 
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); 
    -webkit-transform: skewX(-25deg); 
    transform: skewX(-25deg); 
} 
.hover14 figure:hover::before { 
    -webkit-animation: shine .75s; 
    animation: shine .75s; 
} 
@-webkit-keyframes shine { 
    100% { 
     left: 125%; 
    } 
} 
@keyframes shine { 
    100% { 
     left: 125%; 
    } 
} 

/* Circle */ 
.hover15 figure { 
    position: relative; 
} 
.hover15 figure::before { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    z-index: 2; 
    display: block; 
    content: ''; 
    width: 0; 
    height: 0; 
    background: rgba(255,255,255,.2); 
    border-radius: 100%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    opacity: 0; 
} 
.hover15 figure:hover::before { 
    -webkit-animation: circle .75s; 
    animation: circle .75s; 
} 
@-webkit-keyframes circle { 
    0% { 
     opacity: 1; 
    } 
    40% { 
     opacity: 1; 
    } 
    100% { 
     width: 200%; 
     height: 200%; 
     opacity: 0; 
    } 
} 
@keyframes circle { 
    0% { 
     opacity: 1; 
    } 
    40% { 
     opacity: 1; 
    } 
    100% { 
     width: 200%; 
     height: 200%; 
     opacity: 0; 
    } 
} 

</style> 


     <?php 
      $sql = "SELECT * FROM products"; 
      $records = mysqli_query($db,$sql); 

      while ($row = $records->fetch_assoc()) { 



     ?> 
     <div class="hover02 column"> 
     <div style="display: inline-block;"> 
      <figure><img src=<?php echo $row['photo']; ?> style='display: inline-block;'/></figure> 
      <span><?php echo $row['name']; ?></span> 

      </div> 
     <br> 
     </div> 
      <?php 
     } 
     ?> 

    <br> 
    <br> 
<?php 
include 'sale.php'; 

?> 
<br> 
<div class="hover02 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Prodct1</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Prodct1</span> 
     </div> 
    </div> 
<br> 
    <br> 
    <footer> 
     <?php 
      include 'footer.php'; 
     ?> 

    </footer> 
</body> 
</html>

Source

2017-07-02 Ahad Aman Hunzai

+0

Avez-vous comparé le code HTML dans ces deux situations? Utilisent-ils les mêmes classes? –

Répondre

1

Ajouter float:left sur column classe

.column { 
    margin: 15px 15px 0; 
    padding: 0; 
    float: left; 
}

et enlever trois br balises après la première <div class="hover02 column"> div

Source

2017-07-02 06:24:38

+0

Correction !!!!!!! Je t'aime –

0

Enlever l'affichage: inline-block; formez vos attributs de figure et div, ajoutez l'affichage: inline-block; dans votre classe de cloumn.

.column { 
    margin: 15px 15px 0; 
    padding: 0; 
    display: inline-block; 
    } 
      <div class="hover02 column"> 
        <figure><img src=<?php echo $row['photo']; ?>/></figure> 
        <span><?php echo $row['name']; ?></span> 
      </div>

Source

2017-07-02 06:29:51

 Questions connexes

  • Aucun problème connexe^_^