Jump to content

[SOLVED} Different slider/gallery for different CMS pages ?


Recommended Posts

Hi,

I need to create some CMS pages each with its own album photos which could be displayed via a slider or gallery module.

Does anyone know which slider/gallery works that way ?

I mean setting it to work only with a certain CMS page ?

Regards,

R.

 

SOLVED : Thanks to Nostradamus whose solution works flawlessly.

You're the Man, N!

Edited by Rhobur (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

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.

 

<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>

  • Like 10

Share this post


Link to post
Share on other sites
  • 3 months later...

Hi,

 

I also am looking for a gallery module or ANYTHING like a photo gallery that i can put in CMS page and i can be able to upload and remove images easily any time possible.

 

Is this it? how does it work?

 

Thanks :rolleyes:

Share this post


Link to post
Share on other sites
  • 1 month later...

Hi,

 

I also am looking for a gallery module or ANYTHING like a photo gallery that i can put in CMS page and i can be able to upload and remove images easily any time possible.

 

Is this it? how does it work?

 

Thanks :rolleyes:

 

have you already founded out?

 

because i wanted the same as you want.

 

please let me know

Share this post


Link to post
Share on other sites

Hi,

 

I also am looking for a gallery module or ANYTHING like a photo gallery that i can put in CMS page and i can be able to upload and remove images easily any time possible.

 

Is this it? how does it work?

 

Thanks :rolleyes:

have you already founded out?

 

because i wanted the same as you want.

 

please let me know

 

Yes it will work

 

upload your images and edit the cms page

 

add a new image variable after

variableslide[6]=['http://www.your-site.com/img/kinderfeest/image-07.JPG', '', '']

 

A new image variable would look like this

 

variableslide[7]=['http://www.your-site.com/img/kinderfeest/image-08.JPG', '', '']

  • Like 1

Share this post


Link to post
Share on other sites
  • 3 weeks later...
  • 3 weeks later...
  • 2 weeks later...

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.

 

<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>

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.

 

<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>

Thank you very much Nostradamus. This code works perfectly.

 

Is it possible to add a simple fade transition?

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.

 

<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>

Hi Nostradamus, can u tell me in which file have to edit? I really dont know how to do with those code. and 1 question more, when it created, if i click on the image, will this image display another webpage about productself?

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Hi Nostradamus, can u tell me in which file have to edit? I really dont know how to do with those code. and 1 question more, when it created, if i click on the image, will this image display another webpage about productself?

 

You dont have to edit a file just paste the code in the cms page you like.

As for adding a url and description

 

//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", "url", "description'']

Edited by nostradamus (see edit history)

Share this post


Link to post
Share on other sites
  • 1 month later...
  • 2 months later...
  • 3 weeks later...
  • 3 weeks later...

As @lexandra, I need to include a gallery module (jgalleryview2) into CMS page (in my case id == 7) and display in the Center Column

Does anyone make it?

Thanks!

Share this post


Link to post
Share on other sites
  • 3 months later...
  • 1 month later...

Hi Nostradamus,

I also tried the code on a 1.5.6.0 version, but when i try to save the cms page give the error : the content field (italian) is not valid....

Thanks for your help

Ariom

 

post-148583-0-74091200-1381801618_thumb.jpg

Share this post


Link to post
Share on other sites
  • 3 months later...

I added this in cms.tpl under if tags. it works fine.

If we have different gallery on different cms pages we can't add it to cms.tpl....

 

 

@ariom : its a problem of the last version of prestashop : no javascript inside cms.

Try to go to preferenc->general : allow iframes

 

or read this http://www.prestashop.com/forums/topic/273632-solved-cant-add-an-iframe-in-cms-page-155/

 

but nothing for me is a real good solution.

in 2014 no way to add a gallery or slideshow inside cms pages easily..... so stupid !

Edited by fulviods (see edit history)

Share this post


Link to post
Share on other sites
  • 3 months later...

hi again:

 

Now works but the slider go totaly down of the page...how I can do to put center and top of the cms?? thanks

Share this post


Link to post
Share on other sites

everything depends on where you paste this code.

if you want to use it on the top - paste code on the top of the cms.tpl file

Share this post


Link to post
Share on other sites
  • 4 weeks later...

this seems like what I need, but images are not shown right...

 

i copied them into a subfolder of the PS root. then i referenced them with 'subfolder/filename.jpg' - but the image is not shown. where is the mistake?  :(

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More