Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Resize JavaScript Slideshow

  1. #1
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default Resize JavaScript Slideshow

    Hiya guys,
    I have a bit of a problem with this JavaScript slideshow script. It's called slides, here's a link to the website. So what I'm trying to do, is make the slideshow smaller, but I can't seem to do it. So far, I've tried resizing the id, container, but that causes the slideshow to shift to the left.
    Here's the HTML:
    Code:
    <div id="container">
    <div id="example">
    <img src="img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
    <div id="slides">
    <div class="slides_container">
    <a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank">
    <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
    					<a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
    					<a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
    					<a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
    					<a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by. | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
    					<a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
    					<a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
    				</div>
    				<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
    				<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
    			</div>
    			<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
    		</div>
    CSS:
    Code:
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
    :focus { outline:0; }
    a:active { outline:none; }
    body { line-height:1; color:black; background:white; }
    ol,ul { list-style:none; }
    table { border-collapse:separate; border-spacing:0; }
    caption,th,td { text-align:left; font-weight:normal; }
    blockquote:before,blockquote:after,q:before,q:after { content:""; }
    blockquote,q { quotes:"" ""; }
    
    /*
    	Page style
    */
    
    body { 
    	font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
    	letter-spacing:0;
    	color:#434343;
    	background:#efefef url(../img/background.png) repeat top center;
    	padding:20px 0;
    	position:relative;
    	text-shadow:0 1px 0 rgba(255,255,255,.8);
    	-webkit-font-smoothing: subpixel-antialiased;
    }
    
    #container {
    	width:580px;
    	padding:10px;
    	margin:0 auto;
    	position:relative;
    	z-index:0;
    	top: 45%;
    }
    
    #example {
    	width:600px;
    	height:350px;
    	position:relative;
    }
    
    #ribbon {
    	position:absolute;
    	top:-3px;
    	left:-15px;
    	z-index:500;
    }
    
    #frame {
    	position:absolute;
    	z-index:0;
    	width:739px;
    	height:341px;
    	top:-3px;
    	left:-80px;
    }
    
    /*
    	Slideshow
    */
    
    #slides {
    	position:absolute;
    	top:15px;
    	left:4px;
    	z-index:100;
    }
    
    /*
    	Slides container
    	Important:
    	Set the width of your slides container
    	Set to display none, prevents content flash
    */
    
    .slides_container {
    	width:570px;
    	overflow:hidden;
    	position:relative;
    	display:none;
    }
    
    /*
    	Each slide
    	Important:
    	Set the width of your slides
    	If height not specified height will be set by the slide content
    	Set to display block
    */
    
    .slides_container a {
    	width:570px;
    	height:270px;
    	display:block;
    }
    
    .slides_container a img {
    	display:block;
    }
    
    /*
    	Next/prev buttons
    */
    
    #slides .next,#slides .prev {
    	position:absolute;
    	top:107px;
    	left:-39px;
    	width:24px;
    	height:43px;
    	display:block;
    	z-index:101;
    }
    
    #slides .next {
    	left:585px;
    }
    
    /*
    	Pagination
    */
    
    .pagination {
    	margin:26px auto 0;
    	width:100px;
    }
    
    .pagination li {
    	float:left;
    	margin:0 1px;
    	list-style:none;
    }
    
    .pagination li a {
    	display:block;
    	width:12px;
    	height:0;
    	padding-top:12px;
    	background-image:url(../img/pagination.png);
    	background-position:0 0;
    	float:left;
    	overflow:hidden;
    }
    
    .pagination li.current a {
    	background-position:0 -12px;
    }
    
    /*
    	Footer
    */
    
    #footer {
    	text-align:center;
    	width:580px;
    	margin-top:9px;
    	padding:4.5px 0 18px;
    	border-top:1px solid #dfdfdf;
    }
    
    #footer p {
    	margin:4.5px 0;
    	font-size:1.0em;
    }
    
    /*
    	Anchors
    */
    
    a:link,a:visited {
    	color:#599100;
    	text-decoration:none;
    }
    
    a:hover,a:active {
    	color:#599100;
    	text-decoration:underline;
    }
    Could anyone help? Thanks.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    I'm still looking for help if anyone's willing
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Nov 2009
    Posts
    106
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    After just a quick look I think that you will need to resize the following:

    Code:
    #slides {
    width:a smaller number;
    }
    Also the size of the images (these are inline it looks like).

    also the inline style for left on each of the images. Right now its set to

    Code:
    left: 940px;
    On the example page.

    Also you may need to mess with the negative value in

    Code:
    .slides_control {
    left:-940px;
    }
    This value may need to mirror the size of the left (property) images and the size of the images themselves.

    Good luck.

  4. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Thanks for replying, I've had a title bit more of a look at it, and all changing the size if the slides will do is actually change how much of the image you can see rather than the size of the image, and the frame stays in the same place. I dare not mess with the positioning of the left and right arrows until I have actually managed to change the size of the slideshow.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  5. #5
    Join Date
    Nov 2009
    Posts
    106
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    Yeah but if you change the size of the images (or how they are displayed) as well as the left(value) I think it will equate to a smaller size slideshow. See how all the styles for the images are inline (at least in the example?) Let me know if you figure it out. Good luck.

    http://i1129.photobucket.com/albums/...fordynamic.png
    Last edited by itivae; 07-20-2012 at 11:51 PM.

  6. #6
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    The problem with that theory is that changing the size of #slides, doesn't change the size of the pictures as such, but changes how much of the picture is displayed. So if I went and made the changes to the code as you specified, I'd end up with a small part of an image inside a frame the same size as it was before, with buttons all over the place.
    Thanks anyway,
    bernie
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  7. #7
    Join Date
    Nov 2009
    Posts
    106
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    Think we may have overlapped. I was saying that to change the actual size of the displayed picture container (i.e #slides) will probably be required as long as it is not a %. I would change the size of the images (or at least their inline size) and the left css (or the -leftcss) as required to achieve your end result. This might work without changing the #slides div. But I think you will need to change the container (i.e #slides) to accommodate larger or smaller images on slide (since they are just hidden). Good luck.
    Last edited by itivae; 07-21-2012 at 12:02 AM.

  8. #8
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    I realize that in order to change the size of it, one way would be to change the exact size and positioning of everything in the slideshow, which seems like a bit of a hassle, but what I was really wondering was wether you could simply change the size of the whole thing without having to go around changing all the measurements individually.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  9. #9
    Join Date
    Nov 2009
    Posts
    106
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    I would assume not (though as an after thought is their a variable[constant] for sizing the images in your plugin?). I am often wrong, but am interested in your outcome. Good luck in your endeavors.

  10. #10
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Thanks anyway itivae, I will have a bit more of a crack at resizing the whole thing and then I'll just resize all the measurements.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

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
  •