harrisatria Posted June 4, 2014 Share Posted June 4, 2014 (edited) Can anyone help me, i want to manage image on the CMS page so that look neat. (at frontend) current page looks like this : link : http://littlev.co.id/cms.php?id_cms=9 that page look bad, because if I insert more image, the page will be more longer down. How to resolve this problem? There may be a module that can be used for it? Thanks before. Edited June 4, 2014 by harrisatria (see edit history) Link to comment Share on other sites More sharing options...
ZikmaSolutions Posted June 4, 2014 Share Posted June 4, 2014 Maybe you just need some gallery module for images in your CMS?Is that your problem or something else? Link to comment Share on other sites More sharing options...
harrisatria Posted June 5, 2014 Author Share Posted June 5, 2014 Maybe you just need some gallery module for images in your CMS? Is that your problem or something else? yeah right, i need some image gallery modul or something like that, to manage an images on the page. any solution? there may be a free module? Link to comment Share on other sites More sharing options...
ZikmaSolutions Posted June 5, 2014 Share Posted June 5, 2014 For now i dont know any gallery only for CMS , but you can add this code to your CMS page: <script type="text/javascript" language="JavaScript1.2">// <![CDATA[ var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=['http://www.your-site.com/img/kinderfeest/image-01.JPG', '', ''] variableslide[1]=['http://www.your-site.com/img/kinderfeest/image-02.JPG', '', ''] variableslide[2]=['http://www.your-site.com/img/kinderfeest/image-03.JPG', '', ''] variableslide[3]=['http://www.your-site.com/img/kinderfeest/image-04.JPG', '', ''] variableslide[4]=['http://www.your-site.com/img/kinderfeest/image-05.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-06.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-07.JPG', '', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth='550px' //set to width of LARGEST image in your slideshow var slideheight='412px' //set to height of LARGEST iamge in your slideshow, plus any text description var slidebgcolor='#fff' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById for (i=0;i<variableslide.length;i++){ var cacheimage=new Image() cacheimage.src=variableslide[i][0] } var currentslide=0 function rotateimages(){ contentcontainer='<center>' if (variableslide[currentslide][1]!="") contentcontainer+='<a href="'+variableslide[currentslide][1]+'">' contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">' if (variableslide[currentslide][1]!="") contentcontainer+='</a>' contentcontainer+='</center>' if (variableslide[currentslide][2]!="") contentcontainer+=variableslide[currentslide][2] if (document.layers){ crossrotateobj.document.write(contentcontainer) crossrotateobj.document.close() } else if (ie||dom) crossrotateobj.innerHTML=contentcontainer if (currentslide==variableslide.length-1) currentslide=0 else currentslide++ setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub if (document.layers) document.slidensmain.visibility="show" rotateimages() } if (ie||dom) start_slider() else if (document.layers) window.onload=start_slider // ]]></script> [/C[quote name='nostradamus' timestamp='1335551280' post='813548'] Try this! Change the image url's to your own an past the code using the html input option in the cms page you want. [CODE] <script type="text/javascript" language="JavaScript1.2">// <![CDATA[ var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=['http://www.your-site.com/img/kinderfeest/image-01.JPG', '', ''] variableslide[1]=['http://www.your-site.com/img/kinderfeest/image-02.JPG', '', ''] variableslide[2]=['http://www.your-site.com/img/kinderfeest/image-03.JPG', '', ''] variableslide[3]=['http://www.your-site.com/img/kinderfeest/image-04.JPG', '', ''] variableslide[4]=['http://www.your-site.com/img/kinderfeest/image-05.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-06.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-07.JPG', '', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth='550px' //set to width of LARGEST image in your slideshow var slideheight='412px' //set to height of LARGEST iamge in your slideshow, plus any text description var slidebgcolor='#fff' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById for (i=0;i<variableslide.length;i++){ var cacheimage=new Image() cacheimage.src=variableslide[i][0] } var currentslide=0 function rotateimages(){ contentcontainer='<center>' if (variableslide[currentslide][1]!="") contentcontainer+='<a href="'+variableslide[currentslide][1]+'">' contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">' if (variableslide[currentslide][1]!="") contentcontainer+='</a>' contentcontainer+='</center>' if (variableslide[currentslide][2]!="") contentcontainer+=variableslide[currentslide][2] if (document.layers){ crossrotateobj.document.write(contentcontainer) crossrotateobj.document.close() } else if (ie||dom) crossrotateobj.innerHTML=contentcontainer if (currentslide==variableslide.length-1) currentslide=0 else currentslide++ setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub if (document.layers) document.slidensmain.visibility="show" rotateimages() } if (ie||dom) start_slider() else if (document.layers) window.onload=start_slider // ]]></script> [/CODE] [/quote][quote name='nostradamus' timestamp='1335551280' post='813548'] Try this! Change the image url's to your own an past the code using the html input option in the cms page you want. [CODE] <script type="text/javascript" language="JavaScript1.2">// <![CDATA[ var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=['http://www.your-site.com/img/kinderfeest/image-01.JPG', '', ''] variableslide[1]=['http://www.your-site.com/img/kinderfeest/image-02.JPG', '', ''] variableslide[2]=['http://www.your-site.com/img/kinderfeest/image-03.JPG', '', ''] variableslide[3]=['http://www.your-site.com/img/kinderfeest/image-04.JPG', '', ''] variableslide[4]=['http://www.your-site.com/img/kinderfeest/image-05.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-06.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-07.JPG', '', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth='550px' //set to width of LARGEST image in your slideshow var slideheight='412px' //set to height of LARGEST iamge in your slideshow, plus any text description var slidebgcolor='#fff' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById for (i=0;i<variableslide.length;i++){ var cacheimage=new Image() cacheimage.src=variableslide[i][0] } var currentslide=0 function rotateimages(){ contentcontainer='<center>' if (variableslide[currentslide][1]!="") contentcontainer+='<a href="'+variableslide[currentslide][1]+'">' contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">' if (variableslide[currentslide][1]!="") contentcontainer+='</a>' contentcontainer+='</center>' if (variableslide[currentslide][2]!="") contentcontainer+=variableslide[currentslide][2] if (document.layers){ crossrotateobj.document.write(contentcontainer) crossrotateobj.document.close() } else if (ie||dom) crossrotateobj.innerHTML=contentcontainer if (currentslide==variableslide.length-1) currentslide=0 else currentslide++ setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub if (document.layers) document.slidensmain.visibility="show" rotateimages() } if (ie||dom) start_slider() else if (document.layers) window.onload=start_slider // ]]></script> [/CODE] [/quote][quote name='Dan1' timestamp='1353260859' post='1010774'] Thank you very much Nostradamus. This code works perfectly. Is it possible to add a simple fade transition? [/quote][quote name='nostradamus' timestamp='1335551280' post='813548'] Try this! Change the image url's to your own an past the code using the html input option in the cms page you want. [CODE] <script type="text/javascript" language="JavaScript1.2">// <![CDATA[ var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=['http://www.your-site.com/img/kinderfeest/image-01.JPG', '', ''] variableslide[1]=['http://www.your-site.com/img/kinderfeest/image-02.JPG', '', ''] variableslide[2]=['http://www.your-site.com/img/kinderfeest/image-03.JPG', '', ''] variableslide[3]=['http://www.your-site.com/img/kinderfeest/image-04.JPG', '', ''] variableslide[4]=['http://www.your-site.com/img/kinderfeest/image-05.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-06.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-07.JPG', '', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth='550px' //set to width of LARGEST image in your slideshow var slideheight='412px' //set to height of LARGEST iamge in your slideshow, plus any text description var slidebgcolor='#fff' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById for (i=0;i<variableslide.length;i++){ var cacheimage=new Image() cacheimage.src=variableslide[i][0] } var currentslide=0 function rotateimages(){ contentcontainer='<center>' if (variableslide[currentslide][1]!="") contentcontainer+='<a href="'+variableslide[currentslide][1]+'">' contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">' if (variableslide[currentslide][1]!="") contentcontainer+='</a>' contentcontainer+='</center>' if (variableslide[currentslide][2]!="") contentcontainer+=variableslide[currentslide][2] if (document.layers){ crossrotateobj.document.write(contentcontainer) crossrotateobj.document.close() } else if (ie||dom) crossrotateobj.innerHTML=contentcontainer if (currentslide==variableslide.length-1) currentslide=0 else currentslide++ setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub if (document.layers) document.slidensmain.visibility="show" rotateimages() } if (ie||dom) start_slider() else if (document.layers) window.onload=start_slider // ]]></script> upload your images and edit the cms pageadd a new image variable aftervariableslide[6]=['http://www.your-site...st/image-07.JPG' '', ']A new image variable would look like thisvariableslide[7]=['http://www.your-site...erfeest/image-08.JPG', '', '] 1 Link to comment Share on other sites More sharing options...
harrisatria Posted June 5, 2014 Author Share Posted June 5, 2014 For now i dont know any gallery only for CMS , but you can add this code to your CMS page: <script type="text/javascript" language="JavaScript1.2">// <![CDATA[ var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=['http://www.your-site.com/img/kinderfeest/image-01.JPG', '', ''] variableslide[1]=['http://www.your-site.com/img/kinderfeest/image-02.JPG', '', ''] variableslide[2]=['http://www.your-site.com/img/kinderfeest/image-03.JPG', '', ''] variableslide[3]=['http://www.your-site.com/img/kinderfeest/image-04.JPG', '', ''] variableslide[4]=['http://www.your-site.com/img/kinderfeest/image-05.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-06.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-07.JPG', '', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth='550px' //set to width of LARGEST image in your slideshow var slideheight='412px' //set to height of LARGEST iamge in your slideshow, plus any text description var slidebgcolor='#fff' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById for (i=0;i<variableslide.length;i++){ var cacheimage=new Image() cacheimage.src=variableslide[i][0] } var currentslide=0 function rotateimages(){ contentcontainer='<center>' if (variableslide[currentslide][1]!="") contentcontainer+='<a href="'+variableslide[currentslide][1]+'">' contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">' if (variableslide[currentslide][1]!="") contentcontainer+='</a>' contentcontainer+='</center>' if (variableslide[currentslide][2]!="") contentcontainer+=variableslide[currentslide][2] if (document.layers){ crossrotateobj.document.write(contentcontainer) crossrotateobj.document.close() } else if (ie||dom) crossrotateobj.innerHTML=contentcontainer if (currentslide==variableslide.length-1) currentslide=0 else currentslide++ setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub if (document.layers) document.slidensmain.visibility="show" rotateimages() } if (ie||dom) start_slider() else if (document.layers) window.onload=start_slider // ]]></script> [/C[quote name='nostradamus' timestamp='1335551280' post='813548'] Try this! Change the image url's to your own an past the code using the html input option in the cms page you want. [CODE] <script type="text/javascript" language="JavaScript1.2">// <![CDATA[ var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=['http://www.your-site.com/img/kinderfeest/image-01.JPG', '', ''] variableslide[1]=['http://www.your-site.com/img/kinderfeest/image-02.JPG', '', ''] variableslide[2]=['http://www.your-site.com/img/kinderfeest/image-03.JPG', '', ''] variableslide[3]=['http://www.your-site.com/img/kinderfeest/image-04.JPG', '', ''] variableslide[4]=['http://www.your-site.com/img/kinderfeest/image-05.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-06.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-07.JPG', '', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth='550px' //set to width of LARGEST image in your slideshow var slideheight='412px' //set to height of LARGEST iamge in your slideshow, plus any text description var slidebgcolor='#fff' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById for (i=0;i<variableslide.length;i++){ var cacheimage=new Image() cacheimage.src=variableslide[i][0] } var currentslide=0 function rotateimages(){ contentcontainer='<center>' if (variableslide[currentslide][1]!="") contentcontainer+='<a href="'+variableslide[currentslide][1]+'">' contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">' if (variableslide[currentslide][1]!="") contentcontainer+='</a>' contentcontainer+='</center>' if (variableslide[currentslide][2]!="") contentcontainer+=variableslide[currentslide][2] if (document.layers){ crossrotateobj.document.write(contentcontainer) crossrotateobj.document.close() } else if (ie||dom) crossrotateobj.innerHTML=contentcontainer if (currentslide==variableslide.length-1) currentslide=0 else currentslide++ setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub if (document.layers) document.slidensmain.visibility="show" rotateimages() } if (ie||dom) start_slider() else if (document.layers) window.onload=start_slider // ]]></script> [/CODE] [/quote][quote name='nostradamus' timestamp='1335551280' post='813548'] Try this! Change the image url's to your own an past the code using the html input option in the cms page you want. [CODE] <script type="text/javascript" language="JavaScript1.2">// <![CDATA[ var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=['http://www.your-site.com/img/kinderfeest/image-01.JPG', '', ''] variableslide[1]=['http://www.your-site.com/img/kinderfeest/image-02.JPG', '', ''] variableslide[2]=['http://www.your-site.com/img/kinderfeest/image-03.JPG', '', ''] variableslide[3]=['http://www.your-site.com/img/kinderfeest/image-04.JPG', '', ''] variableslide[4]=['http://www.your-site.com/img/kinderfeest/image-05.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-06.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-07.JPG', '', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth='550px' //set to width of LARGEST image in your slideshow var slideheight='412px' //set to height of LARGEST iamge in your slideshow, plus any text description var slidebgcolor='#fff' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById for (i=0;i<variableslide.length;i++){ var cacheimage=new Image() cacheimage.src=variableslide[i][0] } var currentslide=0 function rotateimages(){ contentcontainer='<center>' if (variableslide[currentslide][1]!="") contentcontainer+='<a href="'+variableslide[currentslide][1]+'">' contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">' if (variableslide[currentslide][1]!="") contentcontainer+='</a>' contentcontainer+='</center>' if (variableslide[currentslide][2]!="") contentcontainer+=variableslide[currentslide][2] if (document.layers){ crossrotateobj.document.write(contentcontainer) crossrotateobj.document.close() } else if (ie||dom) crossrotateobj.innerHTML=contentcontainer if (currentslide==variableslide.length-1) currentslide=0 else currentslide++ setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub if (document.layers) document.slidensmain.visibility="show" rotateimages() } if (ie||dom) start_slider() else if (document.layers) window.onload=start_slider // ]]></script> [/CODE] [/quote][quote name='Dan1' timestamp='1353260859' post='1010774'] Thank you very much Nostradamus. This code works perfectly. Is it possible to add a simple fade transition? [/quote][quote name='nostradamus' timestamp='1335551280' post='813548'] Try this! Change the image url's to your own an past the code using the html input option in the cms page you want. [CODE] <script type="text/javascript" language="JavaScript1.2">// <![CDATA[ var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=['http://www.your-site.com/img/kinderfeest/image-01.JPG', '', ''] variableslide[1]=['http://www.your-site.com/img/kinderfeest/image-02.JPG', '', ''] variableslide[2]=['http://www.your-site.com/img/kinderfeest/image-03.JPG', '', ''] variableslide[3]=['http://www.your-site.com/img/kinderfeest/image-04.JPG', '', ''] variableslide[4]=['http://www.your-site.com/img/kinderfeest/image-05.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-06.JPG', '', ''] variableslide[5]=['http://www.your-site.com/img/kinderfeest/image-07.JPG', '', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth='550px' //set to width of LARGEST image in your slideshow var slideheight='412px' //set to height of LARGEST iamge in your slideshow, plus any text description var slidebgcolor='#fff' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById for (i=0;i<variableslide.length;i++){ var cacheimage=new Image() cacheimage.src=variableslide[i][0] } var currentslide=0 function rotateimages(){ contentcontainer='<center>' if (variableslide[currentslide][1]!="") contentcontainer+='<a href="'+variableslide[currentslide][1]+'">' contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">' if (variableslide[currentslide][1]!="") contentcontainer+='</a>' contentcontainer+='</center>' if (variableslide[currentslide][2]!="") contentcontainer+=variableslide[currentslide][2] if (document.layers){ crossrotateobj.document.write(contentcontainer) crossrotateobj.document.close() } else if (ie||dom) crossrotateobj.innerHTML=contentcontainer if (currentslide==variableslide.length-1) currentslide=0 else currentslide++ setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub if (document.layers) document.slidensmain.visibility="show" rotateimages() } if (ie||dom) start_slider() else if (document.layers) window.onload=start_slider // ]]></script> upload your images and edit the cms page add a new image variable after variableslide[6]=['http://www.your-site...st/image-07.JPG' '', '] A new image variable would look like this variableslide[7]=['http://www.your-site...erfeest/image-08.JPG', '', '] Very thanks Zikma I will try it Link to comment Share on other sites More sharing options...
ZikmaSolutions Posted June 5, 2014 Share Posted June 5, 2014 (edited) Let me know if works Edited June 5, 2014 by ZikmaSolutions (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts