Contenido de variables dinámico
|
Foros » Javascript »
|
« Primera« Anterior123Siguiente »Última » |
| Autor | Fecha: 23 de Diciembre del 2006 a las 13:22:31 Descripción: Ninguna |
Sexo: Masculino
Edad: 21 años
Ubicación: Poza Rica, Veracruz
País:
Mensajes: 1269
|
Pues si todo lo hiciste tal y como dije... no debia de haber ningún problema... 
|
|
|
| Autor | Fecha: 23 de Diciembre del 2006 a las 15:58:49 Descripción: Ninguna |
Sexo: Masculino
Mensajes: 344
|
Dijiste algo de precarga de scripts... que no entendí bien... Creo que ese script esta solo para funcionar con cada imagen que se muestre, no cada imagen que se muestre en otro script, pero no estoy seguro, eso parece, ya que si lo he hecho todo bien, y solo me sale ese efecto en la imagen que está puesta por defecto... Saludos. |
|
|
|
| Autor | Fecha: 23 de Diciembre del 2006 a las 17:02:07 Descripción: Ninguna | ||||
|
Sexo: Masculino
Edad: 21 años
Ubicación: Poza Rica, Veracruz
País:
Mensajes: 1269
|
Dije... sistema de precarga EN el script no DE scripts... eso es otra cosa... Hay scripts que aparte de realizar un efecto sobre una imagen, la precargan para que cargue rapidamente, cuando esta sea solicitada... pero revise el script citado anteriormente, y no vi nada de eso... tambien vi que podia aceptar varias imagenes desde un script... y NO como tu dices, que probablemente se necesitaria un script para cada imagen... yo estoy basandome en la programación del script para decir esto... Y es más, haré un ejemplo en html, usando un script y realizando el efecto sobre 10 imagenes, tomando en cuenta todo lo que he mencionado... Código  <html>
<head> <title>Prueba del script...</title> </head> <body> <script type="text/javascript"> <!-- function initImage(id) { image = document.getElementById(id); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(id,0); } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 10; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } // --> </script> <img src="http://www.imagemozilla.com/images/74709hollywoodbash.gif" width="104" height="70" id="1" onLoad="initImage('1');"> <img src="http://www.imagemozilla.com/images/249406iceslide.gif" width="104" height="70" id="2" onLoad="initImage('2');"> <img src="http://www.imagemozilla.com/images/132420deadtreedefender.gif" width="104" height="70" id="3" onLoad="initImage('3');"> <img src="http://www.imagemozilla.com/images/806869polarboar.gif" width="104" height="70" id="4" onLoad="initImage('4');"> <img src="http://www.imagemozilla.com/images/500373spindoctor.gif" width="104" height="70" id="5" onLoad="initImage('5');"> <img src="http://www.imagemozilla.com/images/38170attackofthesprouts.gif" width="104" height="70" id="6" onLoad="initImage('6');"> <img src="http://www.imagemozilla.com/images/854943havoc_mountain.jpg" width="104" height="70" id="7" onLoad="initImage('7');"> <img src="http://www.imagemozilla.com/images/75991applehunt.gif" width="104" height="70" id="8" onLoad="initImage('8');"> <img src="http://www.imagemozilla.com/images/677949snowline.gif" width="104" height="70" id="9" onLoad="initImage('9');"> <img src="http://www.imagemozilla.com/images/618381santafartypants.gif" width="104" height="70" id="10" onLoad="initImage('10');"> </body> </html> Ves??... el ejemplo funcionó a la perfección... nunca lo habia probado, pero sabia que hacia, y como funcionaba con solo leer su programación... Ahora cito algo que dijiste...
Aquí claramente me estas pidiendo que se aplique el efecto en cada imagen del bloque, y como verás eso se hizo, y de paso se paso el script a php para que no tuvieras problemas. Mira, la situación está, en que no me explicaste bien lo que querias, y si esta bien lo que te dije, pero habria que hacer algunos cambios... viendo el script y el bloque de tu web, supuse que quieres (supuse, porque no me lo dijiste claramente)... Tu quieres que al cambiar de juego o animacion (contenido)... se aplique ese efecto en la imagen... pero resulta que el efecto se aplica cuando la imagen carga... al entrar a tu web, se cargan las 10 imagenes del bloque, y se ve el efecto en la primer imagen... pero no se ve el efecto en las demás, simple y sencillamente porque... YA HAN SIDO CARGADAS... el efecto ya fue aplicado solo que no lo viste... y ello porque dichas imagenes estan ocultas... Recalco, lo que tu quieres es, que el efecto se aplique al "solicitar" la imagen, y no precisamente al cargarla... porque sino, solo se vería dicho efecto en la primer imagen... Tengo o no tengo razón??  Si la tengo dime, para comenzar a integrar los dos scripts...  Saludos P.D. Ah que bonito es saber 
|
||||
|
|
|
| Autor | Fecha: 23 de Diciembre del 2006 a las 21:46:16 Descripción: Ninguna |
|
Sexo: Masculino
Mensajes: 344
|
Exacto luis, lo que quiero esque se vea al solicitarla, no al cargarla, si no solo se ve el efecto en la primera imagen como tu dices  .Saludos. |
|
|
|
| Autor | Fecha: 25 de Diciembre del 2006 a las 17:24:46 Descripción: Ninguna |
|
Sexo: Masculino
Edad: 21 años
Ubicación: Poza Rica, Veracruz
País:
Mensajes: 1269
|
Bueno, te diré que hay que modificar... y aclaro que es una integración simple pero funcional... asi que tendrá que manejarse una id, pero todo irá bien... quizas se podria hacer que fuese sin id, pero es un tanto más complicado y esta muy amontonado el código, no es muy legible... pero bueno. Antes que nada, si no has modificado tu bloque o código, y tiene los cambios que yo te he pedido, al pie de la letra... solo tendrás que enfocarte en modificar el script... de lo contrario tendrás que hacer todos los cambios que menciono, o bueno casi todos... == Paso 1 == Justo después del siguiente código, que se encuentra en la línea 24: Código function ContentSlider(sliderid, autorun){
Agrega esto: Código initImage('1');
Eso se encarga de darle el efecto de desvanecimiento a la primer imagen... Alternativa: Si el efecto no se muestra en la primera imagen, sería porque tardo en cargar e igual el efecto se aplico... entonces puedes añadir ese código solo en la primer imagen (o en todas si se te hace más sencillo, debido al bucle). Ello quedaría de la siguiente manera: Código <img src="http://www.imagemozilla.com/images/74709hollywoodbash.gif" width="104" height="70" id="1" onLoad="initImage('1');">
== Paso 2 == Tienes que editar el siguiente código, que esta en la línea 45: Código pcontent+='<a href="#" onClick="ContentSlider.turnpage(''+sliderid+'', '+i+'); return false">'+(i+1)+'</a> '
Y añadir el efecto de desvanecimiento... con el código: Código onLoad="initImage(''+(i+1)+'');
Lo cual quedaría de la siguiente forma: Código pcontent+='<a href="#" onClick="ContentSlider.turnpage(''+sliderid+'', '+i+'); initImage(''+(i+1)+''); return false">'+(i+1)+'</a> '
== Paso 3 == Como te habia mencionado, las imagenes llevarán una id numerica... obligatoriamente tienen que tener un orden, comenzando por el 1... por ejemplo te quedará asi: Código <div id="slider1" class="contentslide">
<div class="contentdiv"> <img src="http://www.imagemozilla.com/images/74709hollywoodbash.gif" id="1"> </div> <div class="contentdiv"> <img src="http://www.imagemozilla.com/images/249406iceslide.gif" id="2"> </div> <div class="contentdiv"> <img src="http://www.imagemozilla.com/images/132420deadtreedefender.gif" id="3"> </div> </div> Si haces todo bien, funcionará y cambiará cada vez que hagas click en un número se aplicará el efecto, también se aplicará en la primer imagen... todo esta probado... Saludos
|
|
|
|
| Autor | Fecha: 28 de Diciembre del 2006 a las 17:46:21 Descripción: Ninguna |
|
Sexo: Masculino
Mensajes: 344
|
No, no me sale, te pongo los códigos: contentslider.js: Código //** Featured Content Slider script- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Last updated: Oct 28th, 06 ////Ajax related settings var csbustcachevar=0 //bust potential caching of external pages after initial Ajax request? (1=yes, 0=no) var csloadstatustext="<img src='loading.gif' /> Requesting content..." //HTML to indicate Ajax page is being fetched var csexternalfiles=[] //External .css or .js files to load to style the external content(s), if any. Separate multiple files with comma ie: ["cat.css", dog.js"] ////NO NEED TO EDIT BELOW//////////////////////// var enablepersist=true var slidernodes=new Object() //Object array to store references to each content slider's DIV containers (<div class="contentdiv">) var csloadedobjects="" //Variable to store file names of .js/.css files already loaded (if Ajax is used) function ContentSlider(sliderid, autorun){ initImage('1'); var slider=document.getElementById(sliderid) slidernodes[sliderid]=[] //Array to store references to this content slider's DIV containers (<div class="contentdiv">) ContentSlider.loadobjects(csexternalfiles) //Load external .js and .css files, if any var alldivs=slider.getElementsByTagName("div") for (var i=0; i<alldivs.length; i++){ if (alldivs[i].className=="contentdiv"){ slidernodes[sliderid].push(alldivs[i]) //add this DIV reference to array if (typeof alldivs[i].getAttribute("rel")=="string") //If get this DIV's content via Ajax (rel attr contains path to external page) ContentSlider.ajaxpage(alldivs[i].getAttribute("rel"), alldivs[i]) } } ContentSlider.buildpagination(sliderid) var loadfirstcontent=true if (enablepersist && getCookie(sliderid)!=""){ //if enablepersist is true and cookie contains corresponding value for slider var cookieval=getCookie(sliderid).split(":") //process cookie value ([sliderid, int_pagenumber (div content to jump to)] if (document.getElementById(cookieval[0])!=null && typeof slidernodes[sliderid][cookieval[1]]!="undefined"){ //check cookie value for validity ContentSlider.turnpage(cookieval[0], parseInt(cookieval[1])) //restore content slider's last shown DIV loadfirstcontent=false } } if (loadfirstcontent==true) //if enablepersist is false, or cookie value doesn't contain valid value for some reason (ie: user modified the structure of the HTML) ContentSlider.turnpage(sliderid, 0) //Display first DIV within slider if (typeof autorun=="number" && autorun>0) //if autorun parameter (int_miliseconds) is defined, fire auto run sequence window[sliderid+"timer"]=setTimeout(function(){ContentSlider.autoturnpage(sliderid, autorun)}, autorun) } ContentSlider.buildpagination=function(sliderid){ var paginatediv=document.getElementById("paginate-"+sliderid) //reference corresponding pagination DIV for slider var pcontent="" for (var i=0; i<slidernodes[sliderid].length; i++) //For each DIV within slider, generate a pagination link pcontent+='<a href="#" onClick="ContentSlider.turnpage(''+sliderid+'', '+i+'); initImage(''+(i+1)+''); return false">'+(i+1)+'</a> ' pcontent+='<a href="#" style="font-weight: bold;" onClick="ContentSlider.turnpage(''+sliderid+'', parseInt(this.getAttribute('rel'))); return false">Next</a>' paginatediv.innerHTML=pcontent paginatediv.onclick=function(){ //cancel auto run sequence (if defined) when user clicks on pagination DIV if (typeof window[sliderid+"timer"]!="undefined") clearTimeout(window[sliderid+"timer"]) } } ContentSlider.turnpage=function(sliderid, thepage){ var paginatelinks=document.getElementById("paginate-"+sliderid).getElementsByTagName("a") //gather pagination links for (var i=0; i<slidernodes[sliderid].length; i++){ //For each DIV within slider paginatelinks[i].className="" //empty corresponding pagination link's class name slidernodes[sliderid][i].style.display="none" //hide DIV } paginatelinks[thepage].className="selected" //for selected DIV, set corresponding pagination link's class name slidernodes[sliderid][thepage].style.display="block" //show selected DIV //Set "Next" pagination link's (last link within pagination DIV) "rel" attribute to the next DIV number to show paginatelinks[paginatelinks.length-1].setAttribute("rel", thenextpage=(thepage<paginatelinks.length-2)? thepage+1 : 0) if (enablepersist) setCookie(sliderid, sliderid+":"+thepage) } ContentSlider.autoturnpage=function(sliderid, autorunperiod){ var paginatelinks=document.getElementById("paginate-"+sliderid).getElementsByTagName("a") //Get pagination links var nextpagenumber=parseInt(paginatelinks[paginatelinks.length-1].getAttribute("rel")) //Get page number of next DIV to show ContentSlider.turnpage(sliderid, nextpagenumber) //Show that DIV window[sliderid+"timer"]=setTimeout(function(){ContentSlider.autoturnpage(sliderid, autorunperiod)}, autorunperiod) } function getCookie(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return "" } function setCookie(name, value){ document.cookie = name+"="+value } ////////////////Ajax Related functions ////////////////////////////////// ContentSlider.ajaxpage=function(url, thediv){ var page_request = false var bustcacheparameter="" if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else if (window.ActiveXObject){ // if IE try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else return false thediv.innerHTML=csloadstatustext page_request.onreadystatechange=function(){ ContentSlider.loadpage(page_request, thediv) } if (csbustcachevar) //if bust caching of external page bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', url+bustcacheparameter, true) page_request.send(null) } ContentSlider.loadpage=function(page_request, thediv){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) thediv.innerHTML=page_request.responseText } ContentSlider.loadobjects=function(externalfiles){ //function to load external .js and .css files. Parameter accepts a list of external files to load (array) for (var i=0; i<externalfiles.length; i++){ var file=externalfiles[i] var fileref="" if (csloadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding if (file.indexOf(".js")!=-1){ //If object is a js file fileref=document.createElement('script') fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", file); } else if (file.indexOf(".css")!=-1){ //If object is a css file fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", file); } } if (fileref!=""){ document.getElementsByTagName("head").item(0).appendChild(fileref) csloadedobjects+=file+" " //Remember this object as being already added to page } } } Bloque: Código <?php
if (eregi("block-NSN_Topics_Title.php", $_SERVER['PHP_SELF'])) { Header("Location: ../index.php"); die(); } global $prefix, $db; $blkh = 10; // LINEAS $blkw = 20; // NUMERO DE LETRAS POR LINEA: 0 = TOTALIDAD DEL TITULO $content = "<div id="slider1" class="contentslide">"; $result = $db->sql_query("select Img, id, Nomb, Descr from ".$prefix."_juegos order by id DESC limit 0, $blkh"); for($c = 1; list($Img, $id, $Nomb, $Descr) = $db->sql_fetchrow($result); $c++) { $title2 = ereg_replace("_", " ", $Nomb); $transfertitle = ereg_replace(" ", "-", $title2); $title = strtr($id, " ()", "_[]"); if ($blkw > 0 AND strlen($title2) > $blkw) { $title2 = substr($title2, 0, $blkw); } ?> <script type="text/javascript"> <!-- function initImage(id) { image = document.getElementById(id); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(id,0); } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 10; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } // --> </script> <?php $content .= "<div class="contentdiv"><center><a href="juegos-flash-jugar-juego-$id-$transfertitle.html"><img id="$c" src='$Img' title="Clicka aquí para ver el juego" id="1" onLoad="initImage('$c');"><br><a href="juegos-flash-jugar-juego-$id-$transfertitle.html">$Nomb</a><br>$Descr</center></div>"; } $content .= "</div>n"; $content .= "<div class="pagination" id="paginate-slider1"></div>n"; $content .= "<script type="text/javascript">n"; $content .= "//ContentSlider("slider_ID" , opt_miliseconds_rotate)n"; $content .= "ContentSlider("slider1") //or ContentSlider("slider1", 3000) to auto rotate every 3 secondsn"; $content .= "</script>n"; ?> Yo creo que he hecho todo bien, aunque si dices que todo esta probado y no me sale, obvio que en algo habré metido la pata... Saludos. |
|
|
|
| Autor | Fecha: 28 de Diciembre del 2006 a las 18:39:29 Descripción: Ninguna |
|
Sexo: Masculino
Edad: 21 años
Ubicación: Poza Rica, Veracruz
País:
Mensajes: 1269
|
Código <img id="$c" src='$Img' title="Clicka aquí para ver el juego" id="1" onLoad="initImage('$c');">
Aqui parece estar el error... tienes dos id's... y solo debe llevar una... quita id="1". Otra cosa, ese código ha estado funcionando en IE, y muy probablemente funcionará para todos los navegadores posibles... pero no estoy seguro si el hecho de que la id, comienze con un número, te dara problemas... lo que pasa es que una id de una etiqueta no debe comenzar por un número... jajaj pero eso es otra cosa, ya veremos que pasa. Saludos
|
|
|
|
| Autor | Fecha: 29 de Diciembre del 2006 a las 07:02:10 Descripción: Ninguna |
|
Sexo: Masculino
Mensajes: 344
|
Ya está, pero la única pega que veo esque solo pasa cuando clickas en 1, 2 ,3, pero cuando clickas a Next no ocurre, ¿se podría hacer algo para que ocurriese así también? De todas formas ya es mucho pedir. Saludos. |
|
|
|
| Autor | Fecha: 29 de Diciembre del 2006 a las 12:58:45 Descripción: Ninguna |
|
Sexo: Masculino
Edad: 21 años
Ubicación: Poza Rica, Veracruz
País:
Mensajes: 1269
|
Bueno, solo tienes que hacer lo siguiente... Tomando como referencia el código anterior o el que acabas de poner... coloca justo después de la línea 63 o después del código: Código paginatelinks[paginatelinks.length-1].setAttribute("rel", thenextpage=(thepage<paginatelinks.length-2)? thepage+1 : 0)
El siguiente código: Código initImage((thepage<paginatelinks.length-1)? thepage+1 : 1);
Probado... saludos
|
|
|
|
| Autor | Fecha: 29 de Diciembre del 2006 a las 13:43:18 Descripción: Ninguna |
|
Sexo: Masculino
Mensajes: 344
|
Pues no me sale... Aí quedó: Código paginatelinks[paginatelinks.length-1].setAttribute("rel", thenextpage=(thepage<paginatelinks.length-2)? thepage+1 : 0 initImage((thepage<paginatelinks.length-1)? thepage+1 : 1);)
Y lo he puesto también fuera, pero tampoco pasa... |
|
|
|
|
|
« Primera« Anterior123Siguiente »Última » |