Jump to content
jonathanrn

Jquery cycle e ajax

Recommended Posts

Olá pessoal, estou tendo problemas com o jquery cycle depois que chamo outro slide via ajax no lugar do primeiro. Vou explicar melhor e colocar uma imagem.
Preciso fazer isso:

apagar.jpg.950d0538e05b9a41831bc20db67f2759.jpg

O slide 1 já está no index, quando clico no slide 2 ou 3 ele chama seu outro respectivo slide via ajax:

<script type="text/javascript">
	$(document).ready(function(){
		$(".jsEscolha a").click(function( e ){
			e.preventDefault();
			var href = $( this ).attr('href');
			$("#trocaSlideJS").load( href +"#trocaSlideJS");
		});
	});
</script>

 

Jquery Cycle:

<script type="text/javascript">
	$(document).ready(function(){
	//CONF SLIDE
		$('#imagens ul').cycle({
			fx: 'fade',
			speed: 2000,
			timeout: 5000,
			next: '#prox',
			prev: '#ant',
			pager: '#pager'
		});
	});
</script>


HTML: 

<h1>INDEX SEM REFRSH</h1>


					<div id="imagens">
 						<div id="trocaSlideJS">
 							<ul>
                            	<li>
                                	<img src="https://s-media-cache-ak0.pinimg.com/originals/c5/53/7d/c5537d0e8aa31d595a612aae578d2e06.jpg" alt="imagem01" title="imagem01" width="600" height="300" />
                            	</li>
                     
                            	<li>
                                	<img src="http://4.bp.blogspot.com/-J-v5eIxTkwU/UN4sUKWetyI/AAAAAAAAAOk/03TWVVn0iSY/s1600/WallPaper-HD-3160.jpg" alt="imagem02" title="imagem02" width="600" height="300" />
                            	</li>
                     
                            	<li>
                                	<img src="http://cdn.pcwallart.com/images/california-palm-trees-tumblr-background-wallpaper-2.jpg" alt="imagem03" title="imagem03" width="600" height="300" />
                     
                            	</li>
                     
                        	</ul>
 
                        	<div class="pag">
                            	<a href="#" id="ant">anterior</a>
                            	<span id="pager"></span>
                            	<a href="#" id="prox">próximo</a>
                        	</div>
						</div>
                    </div>
                    
                    <div class="jsEscolha">
                    	<button><a href="index.html">slide01</a></button>
                    	<button><a href="slides/slide2.html">slide02</a></button>
                    	<button><a link="slide03.html">slide03</a></button>
                    </div>

 

Quando clico no slide 2 , o ajax chama a id="trocaSlideJS" do slide 2  mas o cycle para de funcionar.

 

O console não mostra muita coisa. Vou deixar o arquivo aqui pra quem quiser se aprofundar: slides.zip

 

Por que não está funcionando? Dês de já agradeço.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By gersonab
      Bom dia, tenho 2 tabelas editáveis em uma div, estas funcionam normalmente, o problema é que o loop não acontece , só carrega sobre 1 item, sendo que este eu posso ter mais itens.
       na página principal tenho:
      <div class="carregadados"></div> function fetch_data() { $.ajax({ url:"../lista/finan.php", method:"POST", success:function(data){ $('.carregadados').html(data); } }); } fetch_data(); a página a ser carregada esta assim:
      <?php session_start(); require_once('config.php'); $output = ''; $idc1=$_SESSION['idc']; $sql01 = "SELECT * FROM porcent WHERE idfcli='$idc1'"; $result = mysqli_query($con, $sql01); while($user41 = mysqli_fetch_array($result)){ // primeiro while onde seleciono os itens da pessoa podendo ter vários $output .= ' <div class="table-responsive mb-4 mt-4"> Aqui vem os dados da pessoa '; $id1= $user41["idproc"]; $sqladv = "SELECT * FROM poradv WHERE procav='$id1'"; $resulta = mysqli_query($con, $sqladv); $output .= ' <table class="table table-bordered table-hover table-striped" style="width:100%"> <thead> <tr> </tr> </thead> <tbody>'; if(mysqli_num_rows($resulta) > 0) { while($usera = mysqli_fetch_array($resulta)){ //segundo while onde tenho os dados de venda em uma tabela editavel $output .= ' <tr> </tr>'; } $output .= ' <tr> // insiro linhas caso precise </tr> '; } else { $output .= '<tr> // caso não tenha nada inserido, posso fazer por aqui </tr> '; } $output .= '</tbody> </table>'; $id2= $user41["idproc"]; $sql = "SELECT * FROM parcelas WHERE procid='$id2' ORDER BY datapar, idpar ASC"; $result = mysqli_query($con, $sql); $output .= ' <table class="table table-bordered table-hover table-striped" style="width:100%"> <thead> <tr> // tabela de pagamentos editavel </tr> </thead> <tbody>'; if(mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_array($result)) { //terceiro while , tabela referente a pagamentos $output .= ' <tr> // tabela pagamentos </tr>'; } $output .= ' <tr> // insiro linhas caso precise </tr> '; } else { $output .= '<tr> // caso não tenha nada inserido, posso fazer por aqui </tr> '; } $output .= '</tbody> </table> </div> '; } echo $output; ?> só esta carregando uma vez , tudo dentro da parte editável esta funcionando, porém no primeiro while só faz 1 loop, os demais estão funcionando perfeitamente.
      desde já agradeço qualquer ajuda.
    • By mamotinho
      Olá, gostaria de sabe como posso fazer uma contagem regressiva apartir de um registro em meu banco de dados eu tentei montar um código da seguinte forma:

       
      <? $DateGET = date('m/d/Y H:i A', strtotime($result->DateDiscount)); ?> <script> var valueDate = <?=$DateGET?>; var end = new Date(valueDate); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance < 0) { clearInterval(timer); document.getElementById("countdown").innerHTML = "EXPIRED!"; return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); document.getElementById("countdown").innerHTML = "<span class='n_date day' id='days'>" + days + "</span><span class='date'>일</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time hour' id='hrs'>" + hours + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time minute' id='minus'>" + minutes + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time second' id='secs'>" + seconds + "</span>"; } timer = setInterval(showRemaining, 1000); </script> Mais infelizmente não passou a data registrada no banco de dados, alguém teria ideia de como posso ta fazendo.
    • By alysson122010
      Galera estou com um sistema de jcrop que quando eu coloco imagem jpg e jpeg ele funciona de boa porem quando coloco png a imagem fica toda preta e salva preta.
       
      PHP que salva
       

      <?php
      /*********************************************************************
           Purpose            : update image.
           Parameters         : null
           Returns            : integer
           ***********************************************************************/
           $post = isset($_POST) ? $_POST: array();
           //print_R($post);die;
           switch($post['action']) {
            case 'save' :
              saveAvatarTmp();
            break;
            default:
              changeAvatar();
              
           }
          
           function changeAvatar() {
              $post = isset($_POST) ? $_POST: array();
              $max_width = "500"; 
              $userId = isset($post['hdn-profile-id']) ? intval($post['hdn-profile-id']) : 0;
              $path = 'images/tmp';
              $valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
              $name = $_FILES['photoimg']['name'];
              $size = $_FILES['photoimg']['size'];
              if(strlen($name))
              {
              list($txt, $ext) = explode(".", $name);
              if(in_array($ext,$valid_formats))
              {
              if($size<(1024*1024)) // Image size max 1 MB
              {
              $actual_image_name = 'avatar' .'_'.$userId .'.'.$ext;
              $filePath = $path .'/'.$actual_image_name;
              $tmp = $_FILES['photoimg']['tmp_name'];
              
              if(move_uploaded_file($tmp, $filePath))
              {
              $width = getWidth($filePath);
                  $height = getHeight($filePath);
                  //Scale the image if it is greater than the width set above
                  if ($width > $max_width){
                      $scale = $max_width/$width;
                      $uploaded = resizeImage($filePath,$width,$height,$scale);
                  }else{
                      $scale = 1;
                      $uploaded = resizeImage($filePath,$width,$height,$scale);
                  }
              /*$res = saveAvatar(array(
                              'userId' => isset($userId) ? intval($userId) : 0,
                                                      'avatar' => isset($actual_image_name) ? $actual_image_name : '',
                              ));*/
                              
              //mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
              echo "<img id='photo' file-name='".$actual_image_name."' class='' src='".$filePath.'?'.time()."' class='preview'/>";
              }
              else
              echo "failed";
              }
              else
              echo "Image file size max 1 MB"; 
              }
              else
              echo "Invalid file format.."; 
              }
              else
              echo "Please select image..!";
              exit;
              
              
          }
          /*********************************************************************
           Purpose            : update image.
           Parameters         : null
           Returns            : integer
           ***********************************************************************/
           function saveAvatarTmp() {
              $post = isset($_POST) ? $_POST: array();
              $userId = isset($post['id']) ? intval($post['id']) : 0;
              $path ='\\images\uploads\tmp';
              $t_width = 300; // Maximum thumbnail width
              $t_height = 300;    // Maximum thumbnail height
              
          if(isset($_POST['t']) and $_POST['t'] == "ajax")
          {
              extract($_POST);
              
              //$img = get_user_meta($userId, 'user_avatar', true);
              $imagePath = 'images/tmp/'.$_POST['image_name'];
              $ratio = ($t_width/$w1); 
              $nw = ceil($w1 * $ratio);
              $nh = ceil($h1 * $ratio);
              $nimg = imagecreatetruecolor($nw,$nh);
              $im_src = imagecreatefromjpeg($imagePath);
              imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w1,$h1);
              imagejpeg($nimg,$imagePath,90);
              
          }
          echo $imagePath.'?'.time();;
          exit(0);    
          }
          
          /*********************************************************************
           Purpose            : resize image.
           Parameters         : null
           Returns            : image
           ***********************************************************************/
          function resizeImage($image,$width,$height,$scale) {
          $newImageWidth = ceil($width * $scale);
          $newImageHeight = ceil($height * $scale);
          $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
          $source = imagecreatefromjpeg($image);
          imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
          imagejpeg($newImage,$image,90);
          chmod($image, 0777);
          return $image;
      }
      /*********************************************************************
           Purpose            : get image height.
           Parameters         : null
           Returns            : height
           ***********************************************************************/
      function getHeight($image) {
          $sizes = getimagesize($image);
          $height = $sizes[1];
          return $height;
      }
      /*********************************************************************
           Purpose            : get image width.
           Parameters         : null
           Returns            : width
           ***********************************************************************/
      function getWidth($image) {
          $sizes = getimagesize($image);
          $width = $sizes[0];
          return $width;
      }
      ?>
       
       
      Jquery
       
      <script type="text/javascript">
              jQuery(document).ready(function(){
              
              jQuery('#change-pic').on('click', function(e){
                  jQuery('#changePic').show();
                  jQuery('#change-pic').hide();
                  
              });
              
              jQuery('#photoimg').on('change', function()   
              { 
                  jQuery("#preview-avatar-profile").html('');
                  jQuery("#preview-avatar-profile").html('Uploading....');
                  jQuery("#cropimage").ajaxForm(
                  {
                  target: '#preview-avatar-profile',
                  success:    function() { 
                          jQuery('img#photo').imgAreaSelect({
                          aspectRatio: '1:1',
                          onSelectEnd: getSizes,
                      });
                      jQuery('#image_name').val(jQuery('#photo').attr('file-name'));
                      }
                  }).submit();
              });
              
              jQuery('#btn-crop').on('click', function(e){
              e.preventDefault();
              params = {
                      targetUrl: 'profile.php?action=save',
                      action: 'save',
                      x_axis: jQuery('#hdn-x1-axis').val(),
                      y_axis : jQuery('#hdn-y1-axis').val(),
                      x2_axis: jQuery('#hdn-x2-axis').val(),
                      y2_axis : jQuery('#hdn-y2-axis').val(),
                      thumb_width : jQuery('#hdn-thumb-width').val(),
                      thumb_height:jQuery('#hdn-thumb-height').val()
                  };
                  saveCropImage(params);
              });
              
           
              
              function getSizes(img, obj)
              {
                  var x_axis = obj.x1;
                  var x2_axis = obj.x2;
                  var y_axis = obj.y1;
                  var y2_axis = obj.y2;
                  var thumb_width = obj.width;
                  var thumb_height = obj.height;
                  if(thumb_width > 0)
                      {
                          jQuery('#hdn-x1-axis').val(x_axis);
                          jQuery('#hdn-y1-axis').val(y_axis);
                          jQuery('#hdn-x2-axis').val(x2_axis);
                          jQuery('#hdn-y2-axis').val(y2_axis);
                          jQuery('#hdn-thumb-width').val(thumb_width);
                          jQuery('#hdn-thumb-height').val(thumb_height);
                          
                      }
                  else
                      alert("Please select portion..!");
              }
              
              function saveCropImage(params) {
              jQuery.ajax({
                  url: params['targetUrl'],
                  cache: false,
                  dataType: "html",
                  data: {
                      action: params['action'],
                      id: jQuery('#hdn-profile-id').val(),
                       t: 'ajax',
                                          w1:params['thumb_width'],
                                          x1:params['x_axis'],
                                          h1:params['thumb_height'],
                                          y1:params['y_axis'],
                                          x2:params['x2_axis'],
                                          y2:params['y2_axis'],
                                          image_name :jQuery('#image_name').val()
                  },
                  type: 'Post',
                 // async:false,
                  success: function (response) {
                          jQuery('#changePic').hide();
                          jQuery('#change-pic').show();
                          jQuery(".imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-border2,.imgareaselect-outer").css('display', 'none');
                          
                          jQuery("#avatar-edit-img").attr('src', response);
                          jQuery("#preview-avatar-profile").html('');
                          jQuery("#photoimg").val('');
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      alert('status Code:' + xhr.status + 'Error Message :' + thrownError);
                  }
              });
              }
              });
          </script>
    • By sirrocha
      Olá pessoal, sou iniciante só que tenho um projeto com uma certa pressão de tempo pra fazer. Um dos problemas que estou tendo é relacionado ao clicar em um tipo "a href" e aplicar uma função. Pelo que vi, tenho que usar AJAX mas não tenho nenhuma noção de como iniciar, mesmo vendo muitos vídeos...

      Basicamente tenho uma página onde está carregando algumas sessões. Porém, ao clicar neste botão:
       
      1 <p><a class="link" name="final" id="fin" onclick="finalizar()" href="areaUsuario.php" style="text-decoration:none;">finalizar</a></p>

      Estava tentando chamar uma função do tipo finalizar(), que iria dar UNSET em duas sessões específicas que eu precisava desligar (por isso não posso usar o destroy para tirar todas).
       
      1 2 3 4 5 6 7 8 9 <script type="text/javascript">>     <?php     function finalizar() {         unset($_SESSION['prestacao']);         unset($_SESSION['nomeproj']);         header("location:areaUsuario.php");     }     ?> </script>

      O que eu fiz e falaram que estava errado era isso. Como posso usar o AJAX neste caso para desligar essas duas funções e enviar o usuário para a área inicial? Por favor, se possível, enviar uma base de como poderia fazer com o raciocínio. É algo urgente, mas também gostaria de aprender.
    • By DinhoPHP
      Pessoal, tenho um código PHP que busca imagens em subpastas, porém gostaria de fazê-lo com que fosse carregado aos poucos pois são muitas fotos, tentei de ns maneiras entender o AJAX, mas não tive sucesso. Favor! Peço ajuda.
       
      loadAjax.php
      $dir = new DirectoryIterator( './images/portfolio/sem_categoria' ); // array contendo os diretórios permitidos $diretoriosPermitidos = array("portfolio","sem_categoria"); foreach($dir as $file) { // verifica se $file é diferente de '.' ou '..' if (!$file->isDot()) { // listando somente os diretórios if ( $file->isDir() ) { // atribui o nome do diretório a variável $dirName = $file->getFilename(); // subdiretórios $caminho = $file->getPathname(); // chamada da função de recursividade recursivo($caminho, $dirName); } // listando somente os arquivos do diretório if ( $file->isFile() ) { // atribui o nome do arquivo a variável $fileName = $file->getFilename(); // print //echo "Arquivos: ".$fileName."<br>"; } } } function recursivo( $caminho, $dirName ){ global $dirName; $DI = new DirectoryIterator( $caminho ); foreach ($DI as $file){ if (!$file->isDot()) { if ( $file->isFile() ) { // $fileName = $file->getFilename(); // //echo $dirName.": ".$fileName."<br>"; echo "<div class='col-12 col-sm-6 col-md-4 col-lg-3 mb-2 d-flex justify-content-center' alt=''> <a href='{$fileName}' class='fresco' data-fresco-group='example' data-fresco-caption='ARJ SERVICE'> <img class='eni-img-thumb' src='images/portfolio/sem_categoria/{$dirName}/{$fileName}'> </a> </div>"; } } } } Tentei adaptar o código abaixo as minhas necessidades, mas não consegui.
      <script> //variavel para controle de registros retornados var pagina = 0; var pesquisa = true; //function carrega function carrega(){ $('#loading').html("<img src='img/loader.gif'/> Carregando Feeds...").fadeIn('fast'); $.ajax({ type: "POST", url: "loadAjax.php", data: "page="+pagina,//variavel passada via post cache: false, success: function(html){ if(html){ $('#loading').fadeOut('fast'); $("#result").append(html); //mostra resultado na div result pesquisa = true; }else{ $('#loading').html("Fim da pesquisa...").fadeIn('fast'); pesquisa = false; } }, error:function(html){ $('#loading').html("erro...").fadeIn('fast'); } }); }; //chama minha funcao ao carregar a pagina $(document).ready(function(){ carrega(); }); //funcao de controle do scroll da pagina, na qual ela chega ao fim é acionada chamando //minha function carrega novamente para trazer mais dados dinamicamente $(window).scroll(function(){ if($(window).scrollTop() + $(window).height() >= $(document).height()){ pagina += 1; carrega(); }; }); </script>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.