Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 68
Sexo: Masculino

include imagens

28-07-2015 12:58

estou com um certo problema com includes com imagens elas nao estao carregando segue o codigo da pagina abaixo

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery.min.js"></script> <link rel="stylesheet" href="css/gallery.css" type="text/css"/> <link rel="stylesheet" href="css/home.css" type="text/css"/> <link rel="stylesheet" href="js/fancy/jquery.fancybox.css?v=2.1.0" media="screen" type="text/css"/> <script src="js/fancy/jquery.fancybox.js?v=2.1.0" type="text/javascript"></script> <script src="js/fancy/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script> <style type="text/css"> /* line 6, ../sass/lightbox.sass */ #lightboxOverlay { position: absolute; top: 0; left: 0; z-index: 9999; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); opacity: 0.85; display: none; } /* line 15, ../sass/lightbox.sass */ #lightbox { position: absolute; left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0; font-family: "lucida grande", tahoma, verdana, arial, sans-serif; font-weight: normal; } /* line 24, ../sass/lightbox.sass */ #lightbox img { width: auto; height: auto; } /* line 27, ../sass/lightbox.sass */ #lightbox a img { border: none; } /* line 30, ../sass/lightbox.sass */ .lb-outerContainer { position: relative; background-color: white; *zoom: 1; width: 250px; height: 250px; margin: 0 auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ .lb-outerContainer:after { content: ""; display: table; clear: both; } /* line 39, ../sass/lightbox.sass */ .lb-container { padding: 10px; } /* line 42, ../sass/lightbox.sass */ .lb-loader { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } /* line 51, ../sass/lightbox.sass */ .lb-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } /* line 59, ../sass/lightbox.sass */ .lb-container > .nav { left: 0; } /* line 62, ../sass/lightbox.sass */ .lb-nav a { outline: none; } /* line 65, ../sass/lightbox.sass */ .lb-prev, .lb-next { width: 49%; height: 100%; background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); /* Trick IE into showing hover */ display: block; } /* line 72, ../sass/lightbox.sass */ .lb-prev { left: 0; float: left; } /* line 76, ../sass/lightbox.sass */ .lb-next { right: 0; float: right; } /* line 81, ../sass/lightbox.sass */ .lb-prev:hover { background: url(../images/prev.png) left 48% no-repeat; } /* line 85, ../sass/lightbox.sass */ .lb-next:hover { background: url(../images/next.png) right 48% no-repeat; } /* line 88, ../sass/lightbox.sass */ .lb-dataContainer { margin: 0 auto; padding-top: 5px; *zoom: 1; width: 100%; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ .lb-dataContainer:after { content: ""; display: table; clear: both; } /* line 95, ../sass/lightbox.sass */ .lb-data { padding: 0 10px; color: #bbbbbb; } /* line 98, ../sass/lightbox.sass */ .lb-data .lb-details { width: 85%; float: left; text-align: left; line-height: 1.1em; } /* line 103, ../sass/lightbox.sass */ .lb-data .lb-caption { font-size: 13px; font-weight: bold; line-height: 1em; } /* line 107, ../sass/lightbox.sass */ .lb-data .lb-number { display: block; clear: left; padding-bottom: 1em; font-size: 11px; } /* line 112, ../sass/lightbox.sass */ .lb-data .lb-close { width: 35px; float: right; padding-bottom: 0.7em; outline: none; } /* line 117, ../sass/lightbox.sass */ .lb-data .lb-close:hover { cursor: pointer; } #galeria{display:inline-block;vertical-align:top; position:relative;display: -moz-inline-stack; zoom: 1; *display: inline;} </style> <title>Untitled Document</title> <script> $(function() { $("body").vegas({ delay: 7500, timer: false, shuffle: true, transition: 'zoomOut', transitionDuration: 700, slides: [ { src: "fotos/foto1.jpg" }, { src: "fotos/foto2.jpg" }, { src: "fotos/foto3.jpg" }, { src: "fotos/foto4.jpg" }, { src: "fotos/foto5.jpg" } ], overlay: true }); $('#nav').spasticNav({ easing : 'easeOutBack' }); }); </script> <script type="text/javascript"> $(document).ready(function(){ $('.box-alb').find('.box-inner-fx').css('background','url()').fadeIn(1000); $('.box-inner').hover( function(){ $(this).find('.box-inner-fx').slideDown(); }, function(){ $(this).find('.box-inner-fx').slideUp(); }) window.onload = function() { $(".rel").fancybox({ openEffect : 'elastic', openSpeed : 150, closeEffect : 'elastic', closeSpeed : 350, arrows: true, helpers : { title : { type : 'float'//float, over, outside,inside }} }); } }) </script> <style> .paginacao li{display:inline-block;padding:4px;} .paginacao li a {display:inline-block;padding:4px;text-decoration:none;color:#333;} .paginacao .current{color:red;} </style> </head> <body> <div id="box2">>>Fotos</div> <div id="box2_meio"><?php @header( 'Content-Type: text/html; charset=iso-8859-1' ); require_once 'database/mysql.php'; $db = new Mysql; $page = 0; $perpage = 12; //quantidade de fotos por página $current = 1; $link = ''; if ( isset( $_GET['page'] ) ) { $current = $_GET['page']; $page = $perpage * $_GET['page'] - $perpage; if ( $_GET['page'] == 1 ) { $page = 0; } } if ( isset( $_GET['id'] ) ) { $album_id = $_GET['id']; $db->query( "select * from albuns join fotos on(album_id = foto_album) where foto_album = $album_id order by foto_pos asc" )->fetchAll(); $total = $db->rows; if ( $total > $perpage ) { $link = "<ul class=\"paginacao\" style=\"float:left; width:99%;\">\n"; $prox = "javascript:;"; $ant = "javascript:;"; if ( $current >= 2 ) { $ant = "?pg=album&id=$album_id&page=" . ($current - 1); } if ( $current >= 1 && $current < ($total / $perpage)) { $prox = "?pg=album&id=$album_id&page=" . ($current + 1); } $link .= '<li><a href="' . $ant . '" title="Anterior">Ant</a></li>'; $from = round( $total / $perpage ) ; if($from == 1){$from++;} for ( $i = 1; $i <= $from; $i++ ) { if ( $current == $i ) { $link .= "<li><a class=\"current\" href=\"?pg=album&id=$album_id&page=$i\"><b>$i</b></a></li>\n"; } else { $link .= "<li><a href=\"album.php?id=$album_id&page=$i\"><b>$i</b></a></li>\n"; } } $link .= '<li><a href="' . $prox . '" title="Próxima">Prox</a></li>'; $link .= "</ul>\n"; } $db->query( "select * from albuns join fotos on(album_id = foto_album) where foto_album = $album_id order by foto_pos asc LIMIT $page,$perpage" )->fetchAll(); if ( $db->rows >= 1 ) { $album_name = $db->data[0]['album_name']; echo "<h1>" . $album_name . "</h1>\n"; echo "<a href=\"album.php\" class=\"back\"><img src=\"images/left.png\"/> Voltar</a>"; foreach ( $db->data as $fotos ) { $f = ( object ) $fotos; $d1 = strtotime( date( 'Y-m-d' ) ) ; $d2 = strtotime( "$f->foto_data" ); $d3 = round( ($d1 - $d2) / 86400 ); $data = $d3; ?> <div class="box-detail" id="<?= $f->foto_id ?>"> <div class="box-inner box-color"> <a class="rel" data-fancybox-group="gallery" href="?pg=fotoss/<?= $f->foto_url ?>" caption="<?= utf8_decode( $f->foto_caption ) ?>"> <img src="?pg=thumb?img=fotos/<?= $f->foto_url ?>" alt="" /> <div class="box-inner-fx"> <h2><?= utf8_decode( $f->foto_caption ) ?></h2> <span>Ampliar</span> </div> </a> </div> <div class="box-bottom"> <?php if ( $f->foto_info != "" ) { ?> <div class="box-bottom-left"><?= utf8_decode( $f->foto_info ) ?></div> <div class="box-bottom-right"><?= $data ?> dia(s) atrás</div> <?php } else { ?> <div class="box-bottom-right"><?= $data ?> dia(s) atrás</div> <?php } ?> </div> </div> <?php } echo $link; } } else { echo "<h1> Selecione um Álbum</h1> <br />\n"; $db->query( "select * from albuns order by album_name asc" )->fetchAll(); if ( $db->rows >= 1 ) { $albuns = $db->data; foreach ( $albuns as $album ) { $a = ( object ) $album; $db->query( "select * from fotos where foto_album = $a->album_id order by foto_pos asc" )->fetchAll(); if ( $db->rows >= 1 ) { $f = ( object ) $db->data[0]; ?> <div class="box-detail box-alb" id="<?= $a->album_id ?>"> <div class="box-inner-alb"> <a href="?pg=album&id=<?= $a->album_id ?>" caption="<?= $a->album_name ?>"> <img src="?pg=thumb?img=fotos/<?= $f->foto_url ?>" alt=""/> <div class="box-inner-fx"> <h2><?= $a->album_name ?></h2> </div> </a> </div> <div class="box-bottom"> <div class="box-bottom-right-photo"><?= $db->rows ?> foto(s)</div> </div> </div> <?php } } } } ?></div> <div id="box2_fim"></div> </body> </html>

o nome dessa pagina é fotoss.php , e o caminho onde fica as imagens é fotos
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: include imagens

28-07-2015 15:54

Baseado que as fotos estão realmente em alguma pasta, a primeira coisa a corrigir é o formato da exibição via echo.

ERRADO <img src="?pg=thumb?img=fotos/<?= $f->foto_url ?>" alt="" /> CORRETO <img src="?pg=thumb?img=fotos/<?php echo $f->foto_url; ?>" alt="" />

Agora se a variável $f->foto_url exibe o nome da foto corretamente, você tem que se basear no diretório que está e fazer referência para a direção que está a foto.

Se está em um diretório anterior ao atual usa: ../ e a frente basta usar as pastas.

Se possível posta aqui o endereço de onde está o arquivo que tem o código acima e o endereço onde está a foto, por exemplo:

http://www.site.com/pasta/arquivo.php
http://www.site.com/fotos/foto.jpg
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 68
Sexo: Masculino

Re: include imagens

28-07-2015 18:30

quando clico nas imagens aparece esse endereço http://localhost/site/?pg=fotoss/551801669371d82122e5c55c6e6c6c35.jpg acho q nao seria correto né ?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: include imagens

28-07-2015 20:58

Não está correto. Foi como falei. Supondo que você tem um banco de dados e em uma coluna da tabela tem o valor:
51801669371d82122e5c55c6e6c6c35.jpg

E é claro, a imagem está em uma pasta. Você tem que fazer o caminho até a imagem:

Ai seria algo como:

<img src="fotos/<?php echo $f->foto_url; ?>" alt="" />

Mas isso depende de onde está a pasta das fotos em relação ao arquivo que está puxando as fotos.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado