News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

dar efectos en Galeria de imagenes de php

Started by jhonsks, December 30, 2016, 01:00:04 AM

Previous topic - Next topic

jhonsks

hola que tal bueno en esta ocacion quisera que tengan la amabilidad de ayudarme con esto, es de como agregarle a mi galeria de imagenes mas efectos como el de poner una flechas, los puntos que me indiquen cada una de la imagen correspondiente , y por ultimo de agregarle una pequeña sinopsis dependiendo de la imagen que vaya


Mi galeria:
http://www.animesaz.890m.com/



como la que quiero:
https://amazingslider.com/es/examples-es/jquery-slideshow-with-ribbon-decoration-es/


$images = array(
       
        'http://i.imgur.com/LMRy6L5.png',
'http://i.imgur.com/PKcMPXK.jpg',
        'http://i.imgur.com/rRWF8Hn.jpg',
       
);
$links = array(
     
'http://www.animesaz.890m.com/',
        'http://www.animesaz.890m.com/',
'http://www.animesaz.890m.com/',
       
);

$delay = 1;

$num_images = count($images);
echo '
<a id="slideshowa" href=""><img id="slideshowimg" src="" alt="" /></a>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var images = [';

for ($i = 0; $i < $num_images; $i++)
echo '["', $images[$i], '"]', ($i == $num_images - 1) ? '' : ',';

echo '];
var links = [';

for ($i = 0; $i < $num_images; $i++)
echo '["', $links[$i], '"]', ($i == $num_images - 1) ? '' : ',';

echo '];
var current_image = 0;
var num_images = ', $num_images, ';
var timer;

function changeImage()
{
if (current_image == num_images)
current_image = 0;
document.getElementById("slideshowimg").src = images[current_image];
document.getElementById("slideshowa").href = links[current_image];
current_image = current_image + 1;
var timer = setTimeout("changeImage();", ', $delay * 5000, ');
}

changeImage();
// ]]></script>';


como veran me redireciona cada url todo bien solo me falta los efectos que mencione al inicio gracias.  :)

jhonsks


d3vcho

¡Hola!

Hacen falta buenos conocimientos de programación, un poco de paciencia y tiempo para poder lograr lo que tu quieres... No es algo que se te pueda indicar cómo hacer fácilmente, alguien lo tendría que realizar tranquilamente...

Siento no poder serte de ayuda.

Saludos :)
"Greeting Death as an old friend, they departed this life as equals"

jhonsks

ya veo se ve q es algo complejo de hacer, espero algun dia allguien con sabios conociemiento me ayude al menos con una orientacion  :-[

#jsDotx3

¿Puedes dejar el HTML puro sin tocar ni nada?. De está forma te lo adapto a como deseas, así mismo, el efecto (en el sitio web cual indicas existen muchos efectos).

Saludos.

Solved
(Life would be easy with a simple solution.)

jhonsks

hola  #jsDotx3 me gustaria que quede algo parecido a esto lo mas seguro esque tu tengas unos html sobre eso , pero en este caso uso el ultimate portal que tambien tiene el hmtl, claro en un bloque  pero es complejo que adapte en fin si sabes como hacerlo te lo agradeceria aca tengo

https://amazingslider.com/es/examples-es/jquery-slideshow-with-ribbon-decoration-es/

aca hay otro siler con los codigos

http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/


pero como te mecione antes me gustia que se adapte en el ultimate portal  :) :)

#jsDotx3

Donde tienes el código del slider, cambia completo por:


$context['html_headers'] .= ' <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>';
$images = array(
       
        'http://i.imgur.com/LMRy6L5.png',
'http://i.imgur.com/PKcMPXK.jpg',
        'http://i.imgur.com/rRWF8Hn.jpg',
       
);
$links = array(
     
'http://www.animesaz.890m.com/',
        'http://www.animesaz.890m.com/',
'http://www.animesaz.890m.com/',
       
);

<div id="carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
 
  for($i=0;$i<count($images);$i++)
  {
    echo'<li data-target="#carousel" data-slide-to="', $i,'" ',  $i == 0 ? 'class="active"' : '','></li>';
}

  </ol>
  <div class="carousel-inner" role="listbox">
     
  for($i=0;$i<count($images);$i++)
  {
  echo'<div class="carousel-item ', $i == 0 ? 'active' : '','">
      <img class="d-block img-fluid" src="',$images[$i],'" alt="First slide">
    </div>';
  }
   
   
  </div>
  <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


Comprueba, me avisas. Ocupe el Carrusel de Bootstrap 4.

Saludos.

Solved
(Life would be easy with a simple solution.)

Natzu01

te agradesco tu respuesta y la ayuda #jsDotx3 pero me sale esto



sabes como te mencione antes es el ultimate portal y es algo difuso , como le aria ahora?? sino te puedo dejar la pagina para que tu mismo lo adaptes te lo agradeceria mucho sabes.

#jsDotx3

Quote from: Natzu01 on January 08, 2017, 10:11:51 PM
te agradesco tu respuesta y la ayuda #jsDotx3 pero me sale esto



sabes como te mencione antes es el ultimate portal y es algo difuso , como le aria ahora?? sino te puedo dejar la pagina para que tu mismo lo adaptes te lo agradeceria mucho sabes.
No se visualiza la imagen, dame datos por privado y te puedo ayudar.

Saludos.

Solved
(Life would be easy with a simple solution.)

jhonsks

amigo #jsDotx3 los slider  que me mandaste no redireccionan osea le doy click en la imagen y no pasa nada.

global $context;

$context['html_headers'] .= '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>';

echo $context['html_headers'];
$images = array(
       
        'http://i.imgur.com/LMRy6L5.png',
  'http://i.imgur.com/PKcMPXK.jpg',
        'http://i.imgur.com/rRWF8Hn.jpg',
       
);
$links = array(
     
  'https://www.facebook.com/',
        'https://www.facebook.com',
  'http://www.animesaz.890m.com/',
       
);
echo'

<div id="carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">';
 
  for($i=0;$i<count($images);$i++)
  {
    echo'<li data-target="#carousel" data-slide-to="', $i,'" ',  $i == 0 ? 'class="active"' : '','></li>';
}
echo'
  </ol>
  <div class="carousel-inner" role="listbox">';
     
  for($i=0;$i<count($images);$i++)
  {
    echo'<div class="carousel-item ', $i == 0 ? 'active' : '','">
      <img class="d-block img-fluid" src="',$images[$i],'" alt="First slide">
    </div>';
  }
   
   echo'
  </div>
  <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>';


que cres q aya pasado porque no re-direcciona ? espero respuesta ya que no contestas mis mensajes saludos amigo

Advertisement: