Simple portal

Natzu01 · April 27, 2016, 07:45:40 PM

buen dia les escribo mi duda, actualmente uso el portal simple y pues como sabran en una de sus funciones esta la de bloques donde se puede agregar bloques o quitar en una de esas esta la de Bienvenida

como veran puse estos codigos

Code Select

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset=utf-8">
	
	<title>Slides, A Slideshow Plugin for jQuery</title>
	
	<link rel="stylesheet" href="css/global.css">
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>
</head>
<body>
	<div id="container">
		<div id="example">
			<img src="img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
			<div id="slides">
				<div class="slides_container">
					<div class="slide">
						<a href="http://www.animetk.net/index.php?topic=171.0"><img src="http://i.imgur.com/zxoABHW.jpg" width="570" height="270" alt="Slide 1"></a>
						<div class="caption" style="bottom:0">
						<font size=4>Reclutamiento de Uploaders - STAFF</font></p>Quieres aportar con nosotros?, ENTRA A ESTE TEMA!!!
							 <font size=2>

						</div></font>
					</div>


					<div class="slide">
<a href="http://www.animetk.net/index.php?topic=6974.0"><img src="http://s6.postimg.org/ml9hmdca9/Tolo.jpg" width="570" height="270" alt="Slide 2"></a>
						<div class="caption">
						<font size=4> To Love Ru Darkness 2nd  - Estreno</font></p>
							 <font size=2>
Basado en los Tomos Del Darkness 2 Nos muestra una ves mas como personajes  centrales a Momo y Yami en este caso veremos la transformacion que muestra yami..
						</div></font>
					</div>
					<div class="slide">
<a href="http://www.animetk.net/index.php?topic=6980.0"><img src="http://s6.postimg.org/tr18otldd/ana.jpg" width="570" height="270" alt="Slide 3"></a>
						<div class="caption">
						<font size=4>Gakkou Gurashi - Estreno</font></p>
							 <font size=2>
akeyaka Yuki es una chica que ama a su escuela. Para ella, es un lugar maravilloso donde puede disfrutar de las actividades..
						</div></font>
					</div>
					<div class="slide">
<a href="http://www.animetk.net/index.php?topic=6950.0"><img src="http://s6.postimg.org/isukkdm5t/gangsta.jpg" width="570" height="270" alt="Slide 4"></a>
						<div class="caption">
						<font size=4>Gangsta  - Estreno</font></p>
							 <font size=2>
En la ciudad de Ergastulum es una villa sombría llena de ladrones, prostitutas y policías corruptos, donde..
						</div></font>
					</div>
					<div class="slide">
<a href="http://www.animetk.net/index.php?topic=6973.0"><img src="http://s6.postimg.org/e88e5g2gg/overlord.jpg" width="570" height="270" alt="Slide 5"></a>
						<div class="caption">
						<font size=4>Overlord - Estreno</font></p>
							 <font size=2>
La historia da comienzo cuando Yggdrasil, un popular juego online, es cerrado un día sin previo aviso. Sin embargo, el protagonista...
						</div></font>
					</div>
					<div class="slide">
<a href="http://www.animetk.net/index.php?topic=6987.0"><img src="http://s6.postimg.org/u7r1ozyi9/god.png" width="570" height="270" alt="Slide 6"></a>
						<div class="caption">
						<font size=4>God Eater - Estreno</font></p>
							 <font size=2>
"Japón, año 2071. La humanidad vive en una sociedad post-apocalíptica en la que unas bestias, conocidas como Aragamis, arrasan con todo lo que encuentran..
						</div></font>
					</div>
					<div class="slide">
<a href="http://www.animetk.net/index.php?topic=6971.0"><img src="http://s6.postimg.org/i8fjhosxd/fre.jpg" width="570" height="270" alt="Slide 7"></a>
						<div class="caption">
						<font size=4>Dragon Ball Super - Estreno</font></p>
							 <font size=2>
La historia del anime tendrá lugar seis meses después de la derrota de Majin Buu,3 cuando la Tierra se ha convertido una vez más en un lugar pacífico...
						</div></font>
					</div>

<div class="slide">
<a href="http://www.animetk.net/index.php?topic=6974.0"><img src="http://s6.postimg.org/ml9hmdca9/Tolo.jpg" width="570" height="270" alt="Slide 2"></a>
						<div class="caption">
						<font size=4> To Love Ru Darkness 2nd  - Estreno</font></p>
							 <font size=2>
Basado en los Tomos Del Darkness 2 Nos muestra una ves mas como personajes  centrales a Momo y Yami en este caso veremos la transformacion que muestra yami..
						</div></font>
					</div>
				</div>
				<a href="" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
			</div>
			<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
		</div>

</body>
</html>

y pues me salio de esta manera

y la idea esque me salga asi como el de la izquierda porque esos codigos los jale de una pagina y en realidad deberia de ser exactamente como la que inique creo q ese estilo lo usan muachas paginas por lo que vi

lo segundo es como puedo editar los bloques pero con comandos html para poder poner por ejemplo un gestos de facebook o page-plugin como se llame bueno no solo de facebook sino puede ser paginas amigas o un paypal.

bueno eso era todo espero a ver sido bien claro, ojalas me den una ayuda gracias

-Rock Lee- · May 05, 2016, 06:12:37 PM

Básicamente lo que estas planteando va un poco mas allá de html simplemente ya usa varias cosas para funcionar correctamente... creo con html5 y CSS3 se logra pero llega un trabajo hacerlo funciona correctamente... y lo de facebook creo se logra con una cuenta Developers creando el plugin, yo lo he realizado de esa manera hace un par de años no se si cambio pero supongo mantendrá la misma forma...

Saludos!

Gluz · May 06, 2016, 11:57:46 PM

Por como sale en la imagen asumo que solo usaste el código HTML de la otra página y no buscaste el demo de ese slider para modificarlo según tus necesidades.

Si mal no recuerdo, ese debería ser el de éste enlace, el cual para que funcione debes descargar archivos que debes subir en el FTP de tu web, y desde ahí llamarlos, luego de eso sigue la parte de modificar el código para que se vea como quieras y agregar los ítems que quieres que salgan.

Aparte de eso, en el bloque HTML no debería ir ni HEAD ni BODY sino lo que va dentro del BODY, y desde ahí cargar todos los scripts adicionales que requiera (aunque es mas correcto cargarlos en el HEAD), por lo que probablemente sea un IFRAME que carga una página aparte que es el código del slider.

Como dije, debes subir los archivos al FTP de tu web, y la forma que debería tener el HTML para poner dentro del bloque en SimplePortal debe quedar parecido a como está el ejemplo de "Images with captions", solo que no debes poner nada de lo siguiente:

Code Select

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<title>Slides, A Slideshow Plugin for jQuery</title>



</head>
<body>


</body>
</html>

Y las rutas a los archivos CSS y JS deben ser las correctas según donde los hayas subido.

Asegurate de formar bien el HTML, ya que en el código que pusiste hay muchos tags mal cerrados y eso también puede causar que no se vea como debe.

Lo de Facebook no entiendo que quieres hacer exactamente.

Si es algo así de poner a que salga alguna página de facebook en el portal, eso se hace poniendo un código que te da la misma página de facebook, que es algo como:

Code Select

<div class="fb-page" data-href="https://www.facebook.com/pages/tu_pagina/ID_numerico" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/tu_pagina/ID_numerico"><a href="https://www.facebook.com/pages/tu_pagina/ID_numerico">tu_pagina</a></blockquote></div></div>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Lo mismo con Paypal, dependiendo si quieres hacer un botón para donaciones o para suscripciones, desde la misma página de Paypal te da las opciones para crearlo y el código HTML que te da va directo a un bloque HTML.

Natzu01 · May 08, 2016, 12:10:33 AM

Hola Gluz no me podrias enviar alguna pagina o codigos asi como el de facebook sobre el primer punto de la imaguen o como hacerlo mas oe menos gracias.

Natzu01 · June 08, 2016, 03:44:23 AM

hola Gluz que tal bueno, ya mande los archivos al ftp a mi theme y defaut y pues no los llama a la hora mandar los html al bloque

especificamente adentro del achivos que me mandaste entre a examples coji images-with-captions de ese cogi los js css, e imague y los mande a mi theme por ejemplo del css mande al ftp el archivo global.css y asi con los demas y pues nada que me arrogue bien los slider

espero una respesta gracias.

Gluz · June 13, 2016, 10:23:28 PM

Ya he rescatado el código que tenía donde puse el slider, y es otro llamado Coin Slider que es muy similar.

Lo que se tiene que hacer es descargar los archivos y ponerlos en el FTP en una carpeta llamada "slider" y editar el index.template.php del tema que vas a usar para agregar antes de:

Code Select

// Output any remaining HTML headers. (from mods, maybe?)
lo siguiente:

Code Select


	// Coin Slider
	echo '
	<script type="text/javascript" src="/slider/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="/slider/coin-slider.min.js"></script>
	<link rel="stylesheet" href="/slider/coin-slider-styles.css" type="text/css" />';

Y luego en el bloque HTML debe ir lo siguiente:

Code Select

<div class="slider-frame" style="background: url(/slider/frame.png) 50% 50% no-repeat; height: 365px; width: 290px; overflow: hidden;">
	<div id="coin-slider">
		<a href="Enlace 1" title="Nombre 1" target="_blank"><img src="Imagen 1" alt="Nombre 1" ><span>Nombre 1</span></a>
		<a href="Enlace 2" title="Nombre 2" target="_blank"><img src="Imagen 2" alt="Nombre 2" ><span>Nombre 2</span></a>
		<a href="Enlace 3" title="Nombre 3" target="_blank"><img src="Imagen 3" alt="Nombre 3" ><span>Nombre 3</span></a>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		$("#coin-slider").coinslider({	width: 225,
						height: 320,
						sph: 5,
						spw: 4,
						navigation: false,
						delay: 5000,
						hoverPause: true });
	});
</script>';

Y con eso se debe ver algo como lo que sale en ésta página en el bloque que dice Nuestras Series.

Claro que debes cambiar los enlaces y nombres a los que vayas a usar, pero esa es la idea.

También se pueden cambiar los parámetros en la última parte, para cambiar el comportamiento de las animaciones del slider.

Natzu01 · June 15, 2016, 03:06:25 AM

hola amigo gluz sobre el primer punto que me sugeriste px si me resulto el slides-slidesjs que es el archivo que me adjuntastes pero se puso adoptar al simpleportal mas lo intente en el ultimate portal y no tuve exito como el anterior portal en fin si sabes agguna manera de poder adptarlo seria se mucha ayuda ,

http://prueba57.890m.com/jhon/index.php simple portal

http://prueba59.890m.com/index.php ultimate portal

lo otro que estoy usando ahora codigos php ytengo tres puntos en la consulta son, añadir una descripción en la parte inferior izquierda, y luego poner un marco que se centra en las imaguenes, a continuación, añadir un botón o numeros para mover las imaguenes de derecha y tambien izqierda , y si es posible una recomendacion de integrar algo mas, Gracias.

le pondre los codigos : este tema ya lo ise publico en otra seccion y aun no me dan respuesta

espero usted si gracias.

Code Select

$images = array(
	'image1_url',
	'image2_url',
	'image3_url',
	'image4_url',
);
$links = array(
	'image1_link',
	'image2_link',
	'image3_link',
	'image4_link',
);

$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 * 1000, ');
	}

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

News:

Simple portal

Natzu01

-Rock Lee-

Gluz

Natzu01

Natzu01

Gluz

Natzu01