Welcome to TalkGraphics.com
Page 4 of 5 FirstFirst ... 2345 LastLast
Results 31 to 40 of 44
  1. #31
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Full width Slidshow ?

    Thanks Gary, but as I mentioned Acorn has done the thinking. I just struggled with this damn IFRAME not wanting to be clipped.
    Maybe I should have mentioned that the slideshow allows to define the display time per slide. In the site head code
    Code:
    <script>
    sDispTimes=new Array(10,8,9,11);
    function sswitch(){
    var n=xr_curp+1;
    if (n==xr_spapn)n=0;
    xr_spapp(n);
    setTimeout(sswitch,sDispTimes[n%sDispTimes.length]*1000);
    }
    setTimeout(sswitch,sDispTimes[0]*1000);
    </script>
    in the line
    sDispTimes=new Array(10,8,9,11);
    the time a slide is displayed is defined in seconds (including the transition time). If you want all slides be displayed for the same time you only need to put one number there...
    The mechanism is that if you have more slides than the number of numbers specified there then it begins to read from start again (slide 1, 5, 9 displayed for 10 seconds, slide 2,6,10 displayed for 8 seconds...).

  2. #32
    Join Date
    Sep 2013
    Posts
    318

    Default Re: Full width Slidshow ?

    Hi Siran

    Many thanks for taking the time to work on this - I will try your solution out - no doubt I will have some more questions, hope you don't mind!

  3. #33
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Full width Slidshow ?

    Happy to help, just ask please.

  4. #34
    Join Date
    Feb 2012
    Location
    Crete, Greece
    Posts
    19

    Default Re: Full width Slidshow ?

    Quote Originally Posted by siran View Post
    Happy to help, just ask please.
    Hi Everyone, haven't posted for ages.

    I have used your code but the slider takes a long while to load even with as few as four images sized at 1400 px wide. It loads to half the screen first which I dont like and nor probably the client.
    I can put a nice note in the placeholder but , is there a fix ? See attached.Click image for larger version. 

Name:	Screenshot 2016-10-15 08.44.24.jpg 
Views:	122 
Size:	67.4 KB 
ID:	114629

    RedTel
    Giving a choice on Crete.

  5. #35
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Full width Slidshow ?

    Hi RedTel,

    Without reading the whole thread again I believe Siran's slideshow is loaded into an iframe on the main site. Your slideshow doesn't appear to use this method, so I wouldn't expect that bit of code to work as expected.

    siran, is there a way to have the images loaded top centre or bottom?
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  6. #36
    Join Date
    May 2002
    Location
    Canada
    Posts
    3,338

    Default Re: Full width Slidshow ?

    What a great idea for Xara to build into their first upgrade for 365 or not?

  7. #37
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Full width Slidshow ?

    Hi RedTel,
    you could try to add an extra
    Code:
    <script>xw_stretch();</script>
    to the page body. So that the first stretching is executed before most of the other initialization.

    Hi Egg,
    could you further explain your question to a dumb German? Which images do you want to place where?

  8. #38
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Full width Slidshow ?

    Hi Egg!
    I have thought about your question.
    The site seems to be using the first variant of the code and uses this CSS:
    Code:
    .xw_stretch {left:50% !important;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    }
    This moves the placeholder to the right. This effect is immediately visible before all the init stuff is done.
    That effect can be compensated by adding margin-left=-50%; so that it looks like:
    Code:
    .xw_stretch {left:50% !important;
    margin-left:-50%;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    }
    Is that what you meant?

  9. #39
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Full width Slidshow ?

    Sorry siran, I was refering to loading the slider into a placeholder as per the last coding you supplied. Using RedTel's images I produced the following. However the place holder is set to 480px high and as the browser stretchs the image to fit, the bottom part of the image is lost (the ducks for example). I understand the reason this has to happen. In Xara's stretchy images the origin of the image can be set at top, centre or bottom. I was wondering if there was a similar code to achieve the same results.

    LINK
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  10. #40
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Full width Slidshow ?

    Hi Egg,
    I have extended the code to support that. But I am not very good with IFRAMEs. Maybe there are better ways to do it.
    To tell the code from where to stretch you might have to add another classname inside of the placeholder (separated by space).
    The default now is to stretch from the center.
    If you want to stretch from the bottom (as in the example) add xw_str_bottom
    If you want to stretch from the top add xw_str_top
    The code still is at the page head and I have only added these lines of
    Code:
       var i=e.firstElementChild;
       var o=0;
       if (e.className.indexOf("xw_str_top")<0){
        o=(h-i.height);
        if (e.className.indexOf("xw_str_bottom")<0){
         o/=2;
        }
       }
       i.style.marginTop=o+"px";
    Attached Files Attached Files

 

 

Bookmarks

Posting Permissions

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