Results 1 to 6 of 6

Thread: I need to modify a script to allow variable sized pictures

  1. #1
    Join Date
    Apr 2013
    Location
    Preston, Lancashire, UK
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default I need to modify a script to allow variable sized pictures

    I have a free script that scrolls in vertical direction, up or down.
    The script defines FIXED picture sizes.
    I need to modify a script to allow variable sized pictures.
    I need the width of each picture to be fixed, to fit into the column.
    Here is the script:
    Code:
    <script type="text/javascript">
    <!--
    // Jeff
    // www.huntingground.freeserve.co.uk
    
    // ********** User Defining Area **********
    
    data=new Array()
    data[0]=new Array("photos/advertising/3counties.jpg","Thumbnail SlideShow Created By ApacheJeff","http://www.ckmarquees.co.uk/")
    data[1]=new Array("photos/advertising/acceo.jpg","Alt text for Image 2","photos/advertising/acceo.jpg")
    data[2]=new Array("photos/advertising/autohome-assistance.jpg","Alt text for Image 3","photos/advertising/autohome-assistance.jpg")
    data[3]=new Array("photos/advertising/bolsover-caravans.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[4]=new Array("photos/advertising/canvas-repair.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[5]=new Array("photos/advertising/caravan-guard.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[6]=new Array("photos/advertising/cleopatras.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[7]=new Array("photos/advertising/edgetechnology.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[8]=new Array("photos/advertising/grantham-caravans.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[9]=new Array("photos/advertising/kdrewe.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[10]=new Array("photos/advertising/leisure-power.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[11]=new Array("photos/advertising/leisure-sales.jpg","Thumbnail SlideShow Created By ApacheJeff","http://www.ckmarquees.co.uk/")
    data[12]=new Array("photos/advertising/lpgenious.jpg","Alt text for Image 2","photos/advertising/acceo.jpg")
    data[13]=new Array("photos/advertising/micks-mobile.jpg","Alt text for Image 3","photos/advertising/autohome-assistance.jpg")
    data[14]=new Array("photos/advertising/northstaffs-caravans.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[15]=new Array("photos/advertising/onechem.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[16]=new Array("photos/advertising/ropers.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[17]=new Array("photos/advertising/shield.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[18]=new Array("photos/advertising/waldegraves.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[19]=new Array("photos/advertising/warburtons.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[20]=new Array("photos/advertising/west-midland-caravans.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    data[21]=new Array("photos/advertising/wandahome.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
    
    imgPlaces=10 // number of images visible
    imgWidth=180 // width of the images
    imgHeight=50 // height of the images
    imgSpacer=40 // space between the images
    
    dir=0 // 0 = up, 1 = down
    
    vis3Window=1 // 0 = Open a new window for links 0 = no 1 = yes
    
    // ********** End User Defining Area **********
    
    moz=document.getElementById&&!document.all
    step=1
    timer=""
    speed=50
    nextPic=0
    initPos=new Array()
    nowDivPos=new Array()
    
    function initVIS3(){
    
    for(var i=0;i<imgPlaces+1;i++){ // create image holders
    newImg=document.createElement("IMG")
    newImg.setAttribute("id","pic_"+i)
    newImg.setAttribute("src","")
    newImg.style.position="absolute"
    newImg.style.width=imgWidth+"px"
    newImg.style.height=imgHeight+"px"
    newImg.style.border=0
    newImg.alt=""
    newImg.i=i
    newImg.onclick=function(){vis3Win(data[this.i][2])}
    document.getElementById("display_area").appendChild(newImg)
    }
    
    containerEL=document.getElementById("container")
    displayArea=document.getElementById("display_area")
    pic0=document.getElementById("pic_0")
    
    containerBorder=(document.compatMode=="CSS1Compat"?0:parseInt(containerEL.style.borderWidth)*2)
    containerHeight=((imgPlaces)*imgHeight)+((imgPlaces-1)*imgSpacer)
    containerEL.style.width=imgWidth+(!moz?containerBorder:"")+"px"
    containerEL.style.height=containerHeight+(!moz?containerBorder:"")+"px"
    
    displayArea.style.height=containerHeight+"px"
    displayArea.style.clip="rect(0,"+(imgWidth+"px")+","+(containerHeight+"px")+",0)"
    
    imgPos= -pic0.height
    
    for(var i=0;i<imgPlaces+1;i++){
    currentImage=document.getElementById("pic_"+i)
    
    if(dir==0){imgPos+=(pic0.height)+imgSpacer} // if up
    
    initPos[i]=imgPos
    if(dir==0){currentImage.style.top=initPos[i]+"px"} // if up
    
    if(dir==1){ // if down
    document.getElementById("pic_"+[(imgPlaces-i)]).style.top=initPos[i]+"px"
    imgPos+=(pic0.height)+imgSpacer
    }
    
    if(nextPic==data.length){nextPic=0}
    
    currentImage.src=data[nextPic][0]
    currentImage.alt=data[nextPic][1]
    currentImage.i=nextPic
    currentImage.onclick=function(){vis3Win(data[this.i][2])}
    nextPic++
    }
    
    scrollVIS3()
    }
    
    timer=""
    function scrollVIS3(){
    clearTimeout(timer)
    for(var i=0;i<imgPlaces+1;i++){
    currentImage=document.getElementById("pic_"+i)
    
    nowDivPos[i]=parseInt(currentImage.style.top)
    
    if(dir==0){nowDivPos[i]-=step}
    if(dir==1){nowDivPos[i]+=step}
    
    if(dir==0&&nowDivPos[i]<= -(pic0.height+imgSpacer) ||dir==1&&nowDivPos[i]>containerHeight){
    
    if(dir==0){currentImage.style.top=containerHeight+imgSpacer+"px"}
    if(dir==1){currentImage.style.top= -pic0.height-(imgSpacer*2)+"px"}
    
    if(nextPic>data.length-1){nextPic=0}
    
    currentImage.src=data[nextPic][0]
    currentImage.alt=data[nextPic][1]
    currentImage.i=nextPic
    currentImage.onclick=function(){vis3Win(data[this.i][2])}
    
    nextPic++
    
    }
    else{
    currentImage.style.top=nowDivPos[i]+"px"
    }
    
    }
    timer=setTimeout("scrollVIS3()",speed)
    
    }
    
    function stopVIS3(){
    clearTimeout(timer)
    }
    
    function vis3Win(loc){
    if(loc==""){return}
    if(vis3Window==0){
    location=loc
    }
    else{
    //window.open(loc)
    newin=window.open(loc,'win1')
    newin.focus()
    }
    }
    
    // add onload="initVIS3()()" to the opening BODY tag
    
    // -->
    </script>
    I have highlighted the part of the script that sets the fixed height of the pictures.
    I need it to be variable.
    Here is a link to the web page, which is under construction / experimenting, where the scroller is running:
    http://touringcaravanclub.co.uk/
    Can anybody show me how to edit this script.

    Thank you,

    John C

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    594
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Well, you could easily say that you were sooooooo close to doing just that when you copied then highlighted the script like you did.

    I looked at the images you have to work with.

    First of.I would add a index.html or index.htm to you directories to keep people from being able to look at what ever you have there.As it is now I or anyone can look into each directory and see what you have.If you don't mind people being able to do this then don't bother but if you want to keep people out for any reason add the page even if it has absolutely nothing on it it will give people an blank page to see instead of everything you have there.

    There red part:
    imgHeight=50 // height of the images

    Can be changed to what ever value you want( use the best size for your image collection.The line above is also important because this too needs to be set to you pictures.
    imgWidth=180 // width of the images

    You change those two numbers to edit the image sizes by height and width.

    The images you have at the top of your page are pretty distorted at 1000 x 150- that does not work good for your images.Do you know what the original width,heights were before you ended with this size?

    And I don't know what the original size of the images you have in the script script above but that should be what you are looking at-make sure the image size is not causing distortion
    Thanks,

    Bud

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,947
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    I don't think that's going to get it. Don't you want the images to be of varying heights so that they maintain their aspect ratio at width 180?

    If so, that script is just not going to do it. I wrote a script a while back that can, but it's for horizontal scrolling. However, recently someone coming for help on it had turned it into a vertical scrolling script. It retained its ability to scale the images within it. So I've made up a live demo for you:

    http://home.comcast.net/~jscheuer1/s...rtscroll-h.htm

    Is that what you're looking for?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    countrydj (04-14-2013)

  5. #4
    Join Date
    Apr 2013
    Location
    Preston, Lancashire, UK
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    I don't think that's going to get it. Don't you want the images to be of varying heights so that they maintain their aspect ratio at width 180?

    If so, that script is just not going to do it. I wrote a script a while back that can, but it's for horizontal scrolling. However, recently someone coming for help on it had turned it into a vertical scrolling script. It retained its ability to scale the images within it. So I've made up a live demo for you:

    http://home.comcast.net/~jscheuer1/s...rtscroll-h.htm

    Is that what you're looking for?
    Hi jscheuer1..
    Thank you forgetting back to me so quickly.

    YES. That is exactly what I am looking for
    There was just 1 problem with the script. On this occasion I needed to link to another web site.
    I modified your script and removed the preset width and height settings.

    The problem is that the Sponsors who supply the logos for linking to, provide them in lots of different sizes.
    I HAVE to limit the width to 180 pixels so as not to exceed the width of the column.

    I have taken the liberty of downloading the source code, and the crawler2.js file.
    I have copied the appropriate codes to another page, and saved crawler2.js to my own server.
    I have assumed that the fact that you gave me the link, you wouldn't mind if I copied the source code, and used it in my own site. Is this OK with you ??? I have not removed your credit from the script.

    With your approval, I will write the script to a file and call it with <?php echo $yourscript ?>

    If not, I will remove it

    Also, I would appreciate a copy of the 'horizontal crawler' script, if that is possible.
    I could use this with another web page that has fixed sized scrolling pictures.

    Once again, I want to thank you so very much for all the help and advice that you have given to me.....

    !!!!! THANK YOU !!!!!

    John C

  6. #5
    Join Date
    Apr 2013
    Location
    Preston, Lancashire, UK
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Hi ajfmrf's ...

    Thank you for your reply.

    Fortunately for me, jscheuer1 already had a script that is perfect for my needs.

    Thank for the reminder about putting an index.htm file in my regional directories.
    I started off with index.php and because I have 21 regions to load up, I changed it to the-region-name.php so as not to get confused which region I was working on.
    The images you have at the top of your page are pretty distorted at 1000 x 150- that does not work good for your images.Do you know what the original width,heights were before you ended with this size?
    I realise this, but at the moment, I haven't been supplied with good photos.
    The whole site is under construction / experiment.

    Regards,

    John C

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,947
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    Let's see. Your last post makes it sound like you don't need the script any more, or maybe you don't need the horizontal one any more.

    On the demo page I set some css styles:

    Code:
    <style type="text/css">
    .marquee a img, .marquee0 a img {
    	width: 180px;
    	display: block;
    	border: 2px solid white !important;
    	margin: 10px auto;
    	padding: 2px;
    }
    .marquee a img:hover, .marquee0 a img:hover {
    	border: 2px solid blue !important;
    }
    .marquee0 div {
    	left: 0px !important;
    	white-space: normal !important;
    }
    </style>
    That one in red may or may not be all that's required to accommodate various width images, resizing them to scale to width 180. I mean it will work, but if the images are a lot different than that, it might mess up the scrolling action. If it does, the script could be edited to fix that, but I don't think it will be a problem.

    The sister script, the one this script was taken from is here:

    http://www.dynamicdrive.com/dynamici...wler/index.htm

    You may use any Dynamic Drive script or any modified Dynamic Drive script as long as you follow these guidelines:

    http://www.dynamicdrive.com/notice.htm

    If you have any questions about the terms feel free to ask. But for what you're describing, as long as the script credit appears in the source code of the served page, that is as long as when I visit the page, if I hit 'View Source', I can see the credit, then you are good.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Script For Uploading Text and Pictures
    By zwinner in forum Looking for such a script or service
    Replies: 1
    Last Post: 02-04-2011, 11:42 AM
  2. Replies: 0
    Last Post: 05-18-2010, 08:47 PM
  3. how do I load pictures into the script?
    By brent2 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-08-2010, 07:47 AM
  4. Tab Content Script pictures
    By Peter2007 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-03-2007, 06:12 PM
  5. Different sized images
    By mlo0919 in forum CSS
    Replies: 0
    Last Post: 12-04-2006, 06:59 AM

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
  •