Results 1 to 15 of 15

Thread: slideshow

  1. #1
    Join Date
    Apr 2011
    Posts
    34

    Default slideshow

    How can I display slide show for several pictures on my home page? Thank you.

  2. #2
    Join Date
    Dec 2007
    Location
    Cumbria
    Posts
    3,683

    Default

    Hi,

    Been discussed a few times on here. For example

    http://www.bluepark.co.uk/forums/sho...ight=slideshow
    Regards,

    Dave

  3. #3
    Join Date
    Feb 2011
    Location
    Northampton
    Posts
    87

    Default

    Quote Originally Posted by honey26 View Post
    How can I display slide show for several pictures on my home page? Thank you.
    I use this one on my sites:

    Ultimate Fade-in slideshow

  4. #4
    Join Date
    Apr 2011
    Posts
    34

    Default

    I have copy and paste the code on my block but nothing came up then I realised I have to replace the top bit
    1. //fadeimages[0]=["/user/image1.jpg","", ""];
    2. //fadeimages[1]=["/user/image2.jpg","", ""];
    3. //fadeimages[2]=["/user/image3.jpg","", ""];
    4. //fadeimages[3]=["/user/image4.jpg","", ""];

    with my own images, but I dont know how to do it.
    is it from this
    //fadeimages[0]=["/user/image1.jpg", "", ""];
    to
    fadeimages[0]=["/user/products/large/20110029m.JPG", "", ""];
    I have no experience of doing HTML, please help!

  5. #5
    Join Date
    Oct 2009
    Location
    Nottingham
    Posts
    2,566

    Default

    Quote Originally Posted by honey26 View Post
    I have copy and paste the code on my block but nothing came up then I realised I have to replace the top bit
    1. //fadeimages[0]=["/user/image1.jpg","", ""];
    2. //fadeimages[1]=["/user/image2.jpg","", ""];
    3. //fadeimages[2]=["/user/image3.jpg","", ""];
    4. //fadeimages[3]=["/user/image4.jpg","", ""];

    with my own images, but I dont know how to do it.
    is it from this
    //fadeimages[0]=["/user/image1.jpg", "", ""];
    to
    fadeimages[0]=["/user/products/large/20110029m.JPG", "", ""];
    I have no experience of doing HTML, please help!
    Yes, that's correct if your images are in that location i.e. /user/products/large/20110029m.JPG

  6. #6
    Join Date
    Apr 2011
    Posts
    34

    Default

    // Fade script

    var fadeimages = new Array();

    fadeimages[0]=["/products/20110029.JPG", "", ""];
    fadeimages[1]=["/products/20110029.JPG", "", ""];
    fadeimages[2]=["/products/20110029.JPG", "", ""];
    fadeimages[3]=["/products/20110029.JPG", "", ""];
    fadeimages[4]=["/products/20110029.JPG", "", ""];

    var fadebgcolor = "white";

    var fadearray = new Array();
    var fadeclear = new Array();

    var dom = (document.getElementById);
    var iebrowser = document.all;

    function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder)
    {
    this.pausecheck = pause;
    this.mouseovercheck = 0;
    this.delay = delay;
    this.degree = 10;
    this.curimageindex = 0;
    this.nextimageindex = 1;
    fadearray[fadearray.length] = this;
    this.slideshowid = fadearray.length - 1;
    this.canvasbase = "canvas" + this.slideshowid;
    this.curcanvas = this.canvasbase + "_0";
    if (typeof displayorder != "undefined")
    theimages.sort(function() { return 0.5 - Math.random(); });
    this.theimages = theimages;
    this.imageborder = parseInt(borderwidth);
    this.postimages = new Array();
    for (p = 0; p < theimages.length; p++)
    {
    this.postimages[p] = new Image();
    this.postimages[p].src = theimages[p][0];
    }
    var fadewidth = fadewidth + this.imageborder * 2;
    var fadeheight = fadeheight + this.imageborder * 2;
    if (iebrowser && dom || dom)
    document.write('<div id="master' + this.slideshowid + '" style="position:relative;width:' + fadewidth + 'px;height:' + fadeheight + 'px;overflow:hidden;"><div id="' + this.canvasbase + '_0" style="position:absolute;width:' + fadewidth + 'px;height:' + fadeheight + 'px;top:0;left:0;filterrogidXImageTransform.Microsoft.alpha(opacity=10);opacit y:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:' + fadebgcolor + '"></div><div id="' + this.canvasbase + '_1" style="position:absolute;width:' + fadewidth + 'px;height:' + fadeheight + 'px;top:0;left:0;filterrogidXImageTransform.Microsoft.alpha(opacity=10);opacit y:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:' + fadebgcolor + '"></div></div>');
    else
    document.write('<div><img name="defaultslide' + this.slideshowid + '" src="/' + this.postimages[0].src + '"></div>');
    if (iebrowser && dom || dom)
    this.startit();
    else
    {
    this.curimageindex++;
    setInterval("fadearray[" + this.slideshowid + "].rotateimage()", this.delay);
    }
    }
    function fadepic(obj)
    {
    if (obj.degree < 100)
    {
    obj.degree += 10;
    if (obj.tempobj.filters && obj.tempobj.filters[0])
    {
    if (typeof obj.tempobj.filters[0].opacity == "number")
    obj.tempobj.filters[0].opacity = obj.degree;
    else
    obj.tempobj.style.filter = "alpha(opacity=" + obj.degree + ")";
    }
    else if (obj.tempobj.style.MozOpacity)
    obj.tempobj.style.MozOpacity = obj.degree / 101;
    else if (obj.tempobj.style.KhtmlOpacity)
    obj.tempobj.style.KhtmlOpacity = obj.degree / 100;
    else if (obj.tempobj.style.opacity && !obj.tempobj.filters)
    obj.tempobj.style.opacity = obj.degree / 101;
    }
    else
    {
    clearInterval(fadeclear[obj.slideshowid]);
    obj.nextcanvas = (obj.curcanvas == obj.canvasbase + "_0") ? obj.canvasbase + "_0" : obj.canvasbase + "_1";
    obj.tempobj = iebrowser ? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas);
    obj.populateslide(obj.tempobj, obj.nextimageindex);
    obj.nextimageindex = (obj.nextimageindex < obj.postimages.length - 1) ? obj.nextimageindex + 1 : 0;
    setTimeout("fadearray[" + obj.slideshowid + "].rotateimage()", obj.delay);
    }
    }
    fadeshow.prototype.populateslide = function(picobj, picindex)
    {
    var slideHTML = "";
    if (this.theimages[picindex][1] != "")
    slideHTML = '<a href="/' + this.theimages[picindex][1] + '" target="' + this.theimages[picindex][2] + '">';
    slideHTML += '<img src="/' + this.postimages[picindex].src + '" border="' + this.imageborder + 'px">';
    if (this.theimages[picindex][1] != "")
    slideHTML += '</a>';
    picobj.innerHTML = slideHTML;
    }
    fadeshow.prototype.rotateimage = function()
    {
    if (this.pausecheck == 1)
    var cacheobj = this;
    if (this.mouseovercheck == 1)
    setTimeout(function() { cacheobj.rotateimage() }, 100);
    else if (iebrowser && dom || dom)
    {
    this.resetit();
    var crossobj = this.tempobj = iebrowser ? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas);
    crossobj.style.zIndex++;
    fadeclear[this.slideshowid] = setInterval("fadepic(fadearray[" + this.slideshowid + "])", 50);
    this.curcanvas = (this.curcanvas == this.canvasbase + "_0") ? this.canvasbase + "_1" : this.canvasbase + "_0";
    }
    else
    {
    var ns4imgobj = document.images['defaultslide' + this.slideshowid];
    ns4imgobj.src = this.postimages[this.curimageindex].src;
    }
    this.curimageindex = (this.curimageindex < this.postimages.length - 1) ? this.curimageindex + 1 : 0;
    }
    fadeshow.prototype.resetit = function()
    {
    this.degree = 10;
    var crossobj = iebrowser ? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas);
    if (crossobj.filters && crossobj.filters[0])
    {
    if (typeof crossobj.filters[0].opacity == "number")
    crossobj.filters(0).opacity = this.degree;
    else
    crossobj.style.filter = "alpha(opacity=" + this.degree + ")";
    }
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity = this.degree / 101;
    else if (crossobj.style.KhtmlOpacity)
    crossobj.style.KhtmlOpacity = this.degree / 100;
    else if (crossobj.style.opacity && !crossobj.filters)
    crossobj.style.opacity = this.degree / 101;
    }
    fadeshow.prototype.startit = function()
    {
    var crossobj = iebrowser ? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas);
    this.populateslide(crossobj, this.curimageindex);
    if (this.pausecheck == 1)
    {
    var cacheobj = this;
    var crossobjcontainer = iebrowser ? iebrowser["master" + this.slideshowid] : document.getElementById("master" + this.slideshowid);
    crossobjcontainer.onmouseover = function() { cacheobj.mouseovercheck = 1 };
    crossobjcontainer.onmouseout = function() { cacheobj.mouseovercheck = 0 };
    }
    this.rotateimage();
    }
    This is what I put on the body part of the block (source), but the exactly same html appear on the page. What have I done wrong?

  7. #7
    Join Date
    Feb 2009
    Posts
    130

    Default

    It says it needs to go in the header section (not as source code on your home page). Where is the Head Section, where can we find that using the backend?

  8. #8
    Join Date
    Dec 2007
    Location
    Cumbria
    Posts
    3,683

    Default

    Quote Originally Posted by bubble View Post
    It says it needs to go in the header section (not as source code on your home page). Where is the Head Section, where can we find that using the backend?
    It's in the optional code tab of your home page in the page manager.
    Regards,

    Dave

  9. #9
    Join Date
    Aug 2007
    Posts
    2,516

    Default

    There will soon be a block which will do this automatically, so no more 3rd party code required for slideshows.
    Developer :: Bluepark Solutions

  10. #10
    Join Date
    Jan 2008
    Posts
    339

    Default

    Quote Originally Posted by Rich View Post
    There will soon be a block which will do this automatically.
    That's great news Rich, I was just doing some work on this myself, any idea when we may be able to get our hands on the new feature?

  11. #11
    Join Date
    Apr 2011
    Posts
    34

    Default

    Fantastic Rich!

  12. #12
    Join Date
    Oct 2008
    Posts
    27

    Default

    Hi,

    I am now trying to figure out how to put the slide show feature at the Home page.
    So far what I did is to upload the pictures in Slide show at Block Manager and now don't know what to do, I mean, how can I insert these picture on my Home page?

    It would be grateful if someone can guide me from here...

    Thank you in advance.

    Kind regards

  13. #13
    Join Date
    Oct 2009
    Location
    Nottingham
    Posts
    2,566

    Default

    Once you have uploaded the pictures to the slideshow in the Block Manager, go to Site / Layout Manager and choose the Front Page/Home Page layout. Within there, you can assign blocks to different areas of your webpage. For example, click on Centre Blocks and you will see a list of blocks that you can assign to the centre part of your webpage. Green flags mean active, red flags mean inactive. Click on the red flag next to the slideshow block to activate it. Now, on the right hand side of that screen, use the up and down arrows (just drag it) to place where you want your slideshow to appear on the webpage. When you no longer want the block to appear on your webpage, simply click the green flag to make it red (inactive).

  14. #14
    Join Date
    Oct 2008
    Posts
    27

    Default

    Thank you Red Devil for your help
    Well, also glad to know that I'm not only one that is working on Saturday...

  15. #15
    Join Date
    Sep 2010
    Location
    Warwick
    Posts
    297

    Default

    I'd like the option for the visitor to control the slideshow block - either with numbers corresponding to the block, or arrows to move the block backwards/fowards.
    Just a thought i'd throw out there!

Similar Threads

  1. Front page slideshow
    By paul in forum Bluepark Technical Discussion
    Replies: 8
    Last Post: 02-10-2007, 12:53

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
About us

Bluepark's ecommerce software is developed, hosted and supported exclusively by ourselves, here in the UK, and has been so since the company was initially formed in 2004. Your brand new online shop will be hosted securely on our fast and reliable server network, using a domain name of your choice, providing the ability to build and maintain your ecommerce website, and manage your orders, from any location via your own secure online Administration Console.

A Bluepark ecommerce site is the perfect tool for selling online, whether you're selling physical products, digital downloads or services. You'll be in good company with over 1,000 UK customers who also form a friendly and helpful online community, further strengthening our highly acclaimed support network.

Find us on...