Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    set screen size for picture_viewer

    Hi there

    I know this picture_viewr js is a fullscreen slide

    Would it be possible to set a screen size (700x500 e.g.) and then set a background color or the part that would be outside this window???


    Thx a lot
    allberto


    http://www.alfaaudiovisual.com/pictu...er/ByB/ByB.htm

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,916
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Looks like you could. Just give the div and the image the width and height you want, the width might be enough. You will probably want to autocenter it. Let's say you give it an ID of show and put this .css in.

    body {width:700px;margin: 0 auto;background:#578}
    #show, #show img {width:700px;height:500px}

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    fullscreen slide set to different size

    Thx DrDos for your resp

    Could you tell where in the fpslideshow.js file would I have to place those parameters...??

    This is the code to the whole file... I'm not sure where to place it...

    Thx very much...

    canalcas

    --------------------------------------------------------------------------------
    var fullpageslideshow={
    imagesarr:[], layers:null, thumbs:null, layerorder:{fg:1, bg:0}, curimage:0, previmage:0,
    setting:{fadeduration:1000, autorotate:{enabled:true, pause:3000}, thumbdimensions:[50,50], sortby:'filename', thumbdir:''},

    signalcomplete:function(){
    var slideshow=this, imagesarr=this.imagesarr, thumbs=this.thumbs, templayer=this.templayer, setting=this.setting, imagecount=0
    function createthumbnail(i, imageref, thumbref){
    var thumbimgsrc=(setting.imagesobj.baseurl)? setting.thumbdir+setting.imagesobj.images[i][1] : imageref.src

    var dot = thumbimgsrc.lastIndexOf('.'); //allows tooltip with filename lines 10,11,12 + title="'+filename+'"
    var slash = thumbimgsrc.lastIndexOf('/');
    var filename = thumbimgsrc.substring(slash+1, dot);


    thumbref.html('<img src="'+thumbimgsrc+'" title="'+filename+'" style="width:'+setting.thumbdimensions[1]+'px;height:'+setting.thumbdimensions[1]+'px" />')
    thumbref.find('img:eq(0)').css({opacity:0.3})
    }
    function process(i, imageref, thumbref){
    templayer.append('<img src="'+imageref.src+'" />')
    var tempimage=templayer.find('img:last')
    imageref._specs={w:tempimage.width(), h:tempimage.height()}
    thumbref.find('img:eq(0)').css({opacity:1})
    if (i==slideshow.curimage){ //if first image has loaded
    slideshow.changeimage(slideshow.curimage, true)
    if (setting.autorotate.enabled)
    setting.rotatetimer=setInterval(function(){slideshow.cycleimage()}, setting.autorotate.pause)
    }
    imagecount++
    if (imagecount==imagesarr.length){
    templayer.remove()
    }
    }
    for (var i=0; i<imagesarr.length; i++){
    createthumbnail(i, imagesarr[i], thumbs.eq(i))
    if (imagesarr[i].complete){
    process(i, imagesarr[i], thumbs.eq(i))
    }
    else{
    imagesarr[i].onload=function(){
    var pos=this._index
    process(pos, this, thumbs.eq(pos))
    }
    }
    }
    },

    scaleimage:function(imageref){
    var od=imageref._specs, windoww=$(window).width(), windowh=$(window).height()
    var neww=(od.w>od.h)? windoww : Math.round(windowh*od.w/od.h)
    var newh=Math.round(neww*od.h/od.w)
    if (neww>windoww){
    neww=windoww
    newh=Math.round(neww*od.h/od.w)
    }
    else if (newh>windowh){
    newh=windowh
    neww=Math.round(newh*od.w/od.h)
    }
    var xpos=(neww>=windoww)? 0 : windoww/2-neww/2
    var ypos=(newh>=windowh)? 0 : windowh/2-newh/2
    return {width:neww+'px', height:newh+'px', left:xpos+'px', top:ypos+'px', position:'absolute'}
    },

    changeimage:function(i, forcechange){
    var layers=this.layers, imagesarr=this.imagesarr, layerorder=this.layerorder, thumbs=this.thumbs, setting=this.setting
    var fglayer=layers.eq(layerorder.fg), bglayer=layers.eq(layerorder.bg)
    if (!imagesarr[i].complete && typeof forcechange=="undefined")
    return
    bglayer.stop(true,true).css({opacity:1, zIndex:999}).empty().append($('<img src="'+imagesarr[i].src+'" />').css(this.scaleimage(imagesarr[i]))) //update background layer's image
    fglayer.css({opacity:1, zIndex:1000}).stop(true,true).animate({opacity:0}, setting.fadeduration, function(){
    bglayer.css('z-index', 1000)
    fglayer.css('z-index', 999)
    })
    layerorder.fg=layerorder.fg==1? 0 : 1
    layerorder.bg=layerorder.bg==1? 0 : 1
    this.previmage=this.curimage
    this.curimage=i
    thumbs.eq(this.previmage).find('img:eq(0)').removeClass('selected')
    thumbs.eq(i).find('img:eq(0)').addClass('selected')
    },

    cycleimage:function(){
    var nextimage=(this.curimage<this.imagesarr.length-1)? this.curimage+1 : 0
    this.changeimage(nextimage)
    },

    init:function(options){
    this.setting=$.extend({}, this.setting, options)
    this.setting.autorotate.pause+=this.setting.fadeduration
    var images=options.imagesobj.images || options.imagesobj, imagesarr=this.imagesarr
    images.pop()
    if (options.imagesobj.baseurl){ //if images are auto retrieved using PHP
    this.setting.thumbdir=options.imagesobj.baseurl+this.setting.thumbdir+"/" //augment thumbnail directory with baseurl to form full URL to thumbs dir
    if (options.sortby=="date")
    images.sort(function(a,b){return new Date(b[2])-new Date(a[2])})
    else{
    images.sort(function(a,b){ //sort by file name
    var filea=a[1].toLowerCase(), fileb=b[1].toLowerCase()
    return (filea<fileb)? -1 : (filea>fileb)? 1 : 0
    })

    }
    }
    var thumbsarr=['<ul class="fpthumbs" style="z-index:1001">']
    for (var i=0; i<images.length; i++){
    imagesarr[i]=new Image()
    imagesarr[i].src=(options.imagesobj.baseurl)? options.imagesobj.baseurl+images[i][1] : images[i]
    imagesarr[i]._index=i
    thumbsarr.push('<li></li>')
    }
    thumbsarr.push('</ul>')
    jQuery(function($){
    var slideshow=fullpageslideshow
    var layers=$('<div style="position:absolute;left:0;top:0; width:100%; height:100%;overflow:hidden;background:black;" />').clone().andSelf().appendTo(document.body)
    var thumbs=$(thumbsarr.join('')).appendTo(document.body)
    thumbs=thumbs.find('li')
    thumbs.each(function(i){
    var $thumb=$(this)
    this._index=i
    $thumb.css({left: 60*i+20})
    $thumb.click(function(){
    clearTimeout(slideshow.setting.rotatetimer)
    slideshow.changeimage(this._index)
    })
    })
    slideshow.layers=layers
    slideshow.thumbs=thumbs
    slideshow.templayer=$('<div style="position:absolute;left:-5000px;top:-5000px;visibility:hidden" />').appendTo(document.body)
    slideshow.signalcomplete()
    $(window).resize(function(){
    if (imagesarr[slideshow.curimage].complete==true)
    var cssattr=slideshow.scaleimage(imagesarr[slideshow.curimage])
    slideshow.layers.eq(slideshow.layerorder.fg).find('img').css(cssattr)
    })
    })
    }

    }

    /////////////INITIALIZE SCRIPT BELOW:

    fullpageslideshow.init({ //initialize script
    imagesobj: fpslideshowvar, //no need to change. Object variable referencing images as generated inside "fpslideshow.php"
    thumbdir: 'thumbnails', //sub directory directly below main images directory containing the thumbnail versions. Image names should be same as main images.
    sortby: 'filename', //sort by "date" or "filename"
    fadeduration: 1000,
    thumbdimensions:[50,50],
    autorotate:{enabled:true, pause:3000}
    })


  •  

    Posting Permissions

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