[Resolvido] galeria em JQUERY

11closed · Julho 26, 2010

ola td bemm !!!

estou com um problema aqui em uma galeria em JQUERY

vi o tutorial aqui

e aqui esta o meu codigo

<?php
error_reporting(E_ERROR | E_WARNING | E_PARSE);
include("config.php");
?>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Álbum de Fotos</title>
 <script type="text/javascript" src="js/mjquery.js"></script>
 <script type="text/javascript" src="js/default.js"></script>
 <script type="text/javascript">
  $(function(){
    	$("#boxImages").find("a").click(function(){
        	var loader = $(".loading");
        	var newImage = $(this).attr('href');
        	var bigImage = $('#fullImage img').not(".loading");
        	$.ajax({
          	type:"GET",
          	url: $(this).attr('href'),
          	success:function(data){
          	},
          	complete: function(){
            	loader.hide();
          	},
          	beforeSend: function(){
            	loader.show();
            	bigImage.attr('src', newImage);
          	}
        	});
        	return false;
    	});
	});
 
 $ (document).ready(function(){
        	$(".loading").hide();
    	});
 </script>
</head>

<body>
<div id="geral">
 <a href="index.php" title="Volte ao Inicio"> Voltar</a> <br/><br/><br/>
<?php
 #Conexão BD
 $chave = $_GET['id'];
 $sql = ("SELECT * FROM albums WHERE id = $chave") or die ("Erro: ". mysql_error());
 $query = mysql_query($sql)or die(mysql_error());
  while($linhas = mysql_fetch_array($query)) {
   echo "
    <b>Titulo do Album:</b>".$linhas["title"]."<br/>
    <b>Descricao do Album:</b>".$linhas["description"]."<br/>
    Enviado em ".$linhas["added"].".
    ";
   $sql1 = ("SELECT * FROM albums_photos WHERE album = $chave") or die ("Erro: ". mysql_error());
   $query1 = mysql_query($sql1)or die(mysql_error());
   while($linhas1 = mysql_fetch_array($query1)) {
    $urldaimg = "galerias/$chave/".$linhas1["file"]."";
    echo '
     <div id="fullImage">
      <img src="swf/loading[1].gif" class="loading" alt="Loading" title="Loading" width="52" height="21" />
      <img src="'.$urldaimg.'" style="width:200px;"/>
     </div>

     	<ul id="boxImages">
       <li><a href=""><img src="'.$urldaimg.'" style="width:64px;"/></a></li>
      <ul>
    ';
   }
  }
?>

</div> 
</body>
</html>

o problema é que quando eu vizualizo esta pagina aparece a imagem de carregando e do lado a imagem do modo fullImage e embaixo a imagem do modo boxImages.

e o while faz ficar as imagens nessa ordem um em baixo da outra

nesse link como devo colocar ?

<li><a href=""><img src="'.$urldaimg.'" style="width:64px;"/></a></li>

alguem pode me ajudar a montar esse JQUEY ...

t+

William Bruno · Julho 26, 2010

o problema é que quando eu vizualizo esta pagina aparece a imagem de carregando e do lado a imagem do modo fullImage e embaixo a imagem do modo boxImages.

e oque é que você quer ??

11closed · Julho 26, 2010

o certo seriaa imagem carregando so aparecer quando nessesaria, e a imagem da div fullImage aparecer uma por fez, esta aparecendo todas uma em baixo da outra

entendeu ?

11closed · Julho 27, 2010

galera consegui arruma vlwww

olha estou tentando colocar um alfa nas imagens usei esse codigo que achei no google aqui

olha o meu codigo como ta.

<script type="text/javascript" src="js/gradualfader.js"></script>

.....
echo '<td><a href="'.$urldaimg.'" class="gradualfader" alt="Imagem"><img src="'.$urldaimg.'" style="width:64px;"/></a></td>';
......

<script type="text/javascript">
 gradualFader.init() //activate gradual fader
 gradualFader.baseopacity=0.6 //set base opacity when mouse isn't over element (decimal below 1)
 gradualFader.increment=0.4 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)
</script>

a pagina gradualfader.js

var gradualFader={}

gradualFader.baseopacity=0.4 //set base opacity when mouse isn't over element (decimal below 1)
gradualFader.increment=0.2 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)

document.write('<style type="text/css">\n') //write out CSS to enable opacity on "gradualfader" class
document.write('.gradualfader{filter:alpha(opacity='+gradualFader.baseopacity*100+'); -moz-opacity:'+gradualFader.baseopacity+'; opacity:'+gradualFader.baseopacity+';}\n')
document.write('</style>')

gradualFader.setopacity=function(obj, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
 var targetobject=obj
 if (targetobject && targetobject.filters && targetobject.filters[0]){ //IE syntax
  if (typeof targetobject.filters[0].opacity=="number") //IE6
   targetobject.filters[0].opacity=value*100
  else //IE 5.5
   targetobject.style.filter="alpha(opacity="+value*100+")"
  }
 else if (targetobject && typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
  targetobject.style.MozOpacity=value
 else if (targetobject && typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
  targetobject.style.opacity=value
 targetobject.currentopacity=value
}
....

o alfa ñ esta pegando em nenhuma versão do Explorer poq será ???

alguem sabe ?

t+

augustoclaro · Julho 27, 2010

ie não suporta css3

11closed · Julho 30, 2010

puts serioo .... Imagem Postada

tentei aqui deixar a galeria com imagens rotativa mais tem algo dano errado quando eu atualizo a pagina a 1ª imagem sai mais a 2ª para frente ñ esta emcontrano

javascripts

// imagem rotativa ------------------------------------------------------------var bannerAD=new Array();var bannerADlink=new Array();var adNum=1;//Coloque o link das imagens aqui:var imagem = new Array();<?php        	// Faz o Select pegando o registro inicial até a quantidade de registros para página $banco = mysql_query("SELECT * FROM albums_photos WHERE album = $chave"); $quantas = mysql_num_rows($banco);while( $dados = mysql_fetch_assoc($banco) )   { for($i=1;$i<=$quantas;$i++) {  echo "imagem".$i." = 'galerias/$chave/".$dados["file"]."';";    }  }?>//Pode criar variaveis para usar mais de uma vezbannerAD[1]=imagem1;bannerADlink[1]="";bannerAD[2]=imagem2;bannerADlink[2]="";bannerAD[3]=imagem3;bannerADlink[3]="";bannerAD[4]=imagem4;bannerADlink[4]="";bannerAD[5]=imagem5;bannerADlink[5]="";bannerAD[6]=imagem6;bannerADlink[6]="";bannerAD[7]=imagem7;bannerADlink[7]="";bannerAD[8]=imagem8;bannerADlink[8]="";bannerAD[9]=imagem9;bannerADlink[9]="";var preloadedimages=new Array();for (i=1;i<bannerAD.length;i++){preloadedimages[i]=new Image();preloadedimages[i].src=bannerAD[i];}function setTransition(){if (document.all){bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);bannerADrotator.filters.revealTrans.apply();}}function playTransition(){if (document.all)bannerADrotator.filters.revealTrans.play()}function nextAd(){if(adNum<bannerAD.length-1)adNum++ ;else adNum=0;setTransition();document.images.bannerADrotator.src=bannerAD[adNum];playTransition();theTimer=setTimeout("nextAd()", 5000);}function jump2url(){jumpUrl=bannerADlink[adNum];jumpTarget='_self';if (jumpUrl != ''){if (jumpTarget != '')window.open(jumpUrl,jumpTarget);else location.href=jumpUrl;}}function displayStatusMsg() { status=bannerADlink[adNum];document.returnValue = true;}

<div id="fullImage">      <img src="swf/loading[1].gif" class="loading" alt="Carregando" title="Carregando" />      <img src="'.$urldaimg.'" name="bannerADrotator" style="width:400px; height:350px; filter:revealTrans(duration=3,transition=10)"/>      <script language="JavaScript">nextAd()</script> </div>

alguem sabe o que esta errado ???

t+

ola galera td bom !!!

olha eu andei pesquisando na net e achei uma galeria mais facil de usar, obrigado.........

fico assim

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd [/url]"><html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml [/url]"><head> <title> .: <?php echo ''.$linhas["nlocal"].' para '.$linhas["AnuncioTipo"].''; ?> :. </title> <link rel="stylesheet" type="text/css" href="../scripts_estilos/estilo.css"> <script type="text/javascript" src="../scripts_estilos/jquery.min.js"></script> <script type="text/javascript" src="../scripts_estilos/jquery.galleria.js"></script> <script type="text/javascript" src="../scripts_estilos/galleria.classic.js"></script> <script type="text/javascript" src="../scripts_estilos/galleria.js"></script> <script type="text/javascript">  $(document).ready(function(){    $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability    $('ul.gallery_demo').galleria({   history   : true, // activates the history object for bookmarking, back-button etc.   clickNext : true, // helper for making the image clickable   insert	: '#main_image', // the containing selector for our main image   onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes        // fade in the image & caption    image.css('display','none').fadeIn(2000);    caption.css('display','none').fadeIn(2000);        // fetch the thumbnail container    var _li = thumb.parents('li');        // fade out inactive thumbnail    _li.siblings().children('img.selected').fadeTo(500,0.3);        // fade in active thumbnail    thumb.fadeTo('fast',1).addClass('selected');        // add a title for the clickable image    image.attr('title','Next image >>');   },   onThumb : function(thumb) { // thumbnail effects goes here        // fetch the thumbnail container    var _li = thumb.parents('li');        // if thumbnail is active, fade all the way.    var _fadeTo = _li.is('.active') ? '1' : '0.3';        // fade in the thumbnail when finnished loading    thumb.css({display:'inline',opacity:_fadeTo}).fadeIn(1500);        // hover effects    thumb.hover(     function() { thumb.fadeTo('fast',1); },     function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active    )   }  }); });  </script></head><body><div id="geral"><div id="centro">   <?php           echo '       <h1>'.$linhas1["frazeAnuncio"].'</h1>       <h1>Este anuncio foi publicado dia '.$linhas1["Datacadastro"].' .</h1>       <div id="galerias">        <div id="fotoscasa">         <div class="demo">          <div id="main_image"></div>          <div class="galleria-thumb-nav-left" onMouseOver="javascript:this.style.backgroundColor='#666666'"" onMouseOut="javascript:this.style.backgroundColor=''"></div>          <ul class="gallery_demo_unstyled">       ';           $sql3 = ("SELECT * FROM albums WHERE codigoid_albums = ".$grava."") or die ("Erro: ". mysql_error());           $query3 = mysql_query($sql3)or die(mysql_error());           while($linhas3 = mysql_fetch_array($query3)) {            $sql4 = ("SELECT * FROM albums_photos WHERE album = ".$linhas3["id_albums"]."") or die ("Erro: ". mysql_error());            $query4 = mysql_query($sql4)or die(mysql_error());            while($linhas4 = mysql_fetch_array($query4)) {             $urldaimg = "fotos/".$linhas4["file"]."";             echo "<li><img src='$urldaimg' alt='Imagem' title='".$linhas4["titulo"]."' width='50'/></li>";            }           }   ?>                      </ul>          <div class="galleria-thumb-nav-right" onMouseOver="javascript:this.style.backgroundColor='#666666'" onMouseOut="javascript:this.style.backgroundColor=''"></div>          <p class="nav"><a href="#" onclick="$.galleria.prev(); return false;"><img src='../includes/img/l.png' alt='Proximo' width='22'/></a> | <a href="#" onclick="$.galleria.next(); return false;"><img src='../includes/img/r.png' alt='Anterior' width='22'/></a></p>         </div>        </div>        <div id="fotosredores">                </div>       </div></div></body></html>

Agora eu estou tentendo fazer uma paginação nas fotos miniatura parecida com dessa galeria olha aqui

Essas duas linhas são as flechas left e right

<div class="galleria-thumb-nav-left" onMouseOver="javascript:this.style.backgroundColor='#666666'"" onMouseOut="javascript:this.style.backgroundColor=''"></div><div class="galleria-thumb-nav-right" onMouseOver="javascript:this.style.backgroundColor='#666666'" onMouseOut="javascript:this.style.backgroundColor=''"></div>

não sei poque ñ esta dano certo, tentei achar o erro mais não obtive resultados positivos

na pagina galleria.js quando eu apago esse codigo abaixo o <ul> aonde fica as fotos miniaturas fica td branco as fotos somi

jQuery.fn.galleria = function(options) {	options = options || {};		var selector = this.selector;	if ( !options.keep_source ) {    	jQuery(this).children().hide();	}		options = G.prototype.mix(options, {target: selector } );	var height = G.prototype.height(this) || G.prototype.getStyle(this, 'height', true);	if (!options.height && height) {    	options = G.prototype.mix( { height: height }, options );	}		G.debug = !!options.debug;		var gallery = new G(options);		if (G.theme) {    	gallery.init();	} else {    	jQuery(document).bind(G.THEMELOAD, function() {        	gallery.init();    	});	}

alguem pode me ajudar a implementar essa paginação na minha galeria ???????????? please

a galeria que eu estou usando é essa aqui.

....

t+

ola galera

eu ja consegui implementar a paginação na galeria blzzz....

essa galeria que eu estou usando aqui

tem um titulo nas fotos gostaria de mudar a cor da font, mais ñ estou conseguindo, deve ser facil, mais ñ acho o local para inserir o "color". ]

aonde que eu altero ????

e no Explorer ta aparecendo um quadro branco em cima de tudo, parece um textarea desabilitado, como tirar ele ??????

no firefox, opera, chromo esta certo, so no explorer msm....

t+

11closed · Agosto 7, 2010

ola galera, depois de muito trampo consegui colocar uma paginação bem legal a galeria fico do jeitinho que eu queria ...

obrigadoo galeraaaa

so falto um problema, esse do explorer tem um maldito(srsrr) de um quadrado branco que ñ acho onde ele esta sendo criado, ñ tenho idéia de como tira-lo

t+

Entrar

Arquivado

[Resolvido] galeria em JQUERY

Recommended Posts

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

augustoclaro 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante