Advanced Search

Results 1 to 4 of 4

Thread: Issue with position of slideshow relative to overlaying transparent border image

  1. #1
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Issue with position of slideshow relative to overlaying transparent border image

    Firstly, could you please have a look at the website I am making for myself glennhall.net.au and you will get an idea of what I am trying to do.
    I am no web master guru, don't know anyone locally to help me in person and I have done my best to explain things.

    I am using picturefill.js to send appropriate sized images based on media queries. That's why the images in this test website are numbered for you to see what's happening.
    I have removed nearly everything from the html to present the issue clearly, so there may be some fat in the ,css and .js side of things.
    I have then combined picturefill.js to deliver images to a responsive slide show. The slideshow is using responsiveslides.js.

    With the slideshow behaving properly, I then included a transparent border image to frame the slideshow. That's where I have been stuck for the past week.
    I wish to have the slideshow position itself inside the inner frame of the transparent image and KEEP that position regardless of any change to window size or orientation of display (tablets etc).

    I have come to the point where I am at a blank, where a simple fix to a simple problem now seems like a huge muddled mess. I simply need help.

    To help you, here is the complete website, compressed into a zip file.

    I have some relevant code for you here below.

    Code:
    <div class="article-row"><!-- just normal paragraph formatting and position -->
        <img src="img/front-cover.png" class="image_overlay"><!-- this is the problem transparent border -->
            <div class="rslides" id="slider1"><!-- this is the slideshow -->
                <li><!-- each image to slideshow is enclose in a "li" tag -->
                    <div data-picture data-alt=""><!-- for browsers with no javascript -->
    			<div data-src="images_slider/1_180.jpg">
    			</div>
    			<div data-src="images_slider/1_375.jpg" data-media="(min-width: 400px)">
    			</div>
    			<div data-src="images_slider/1_480.jpg" data-media="(min-width: 800px)">
    			</div>
    			<div data-src="images_slider/1_768.jpg" data-media="(min-width: 1000px)">
    			</div>
    		</div>
                </li><!-- following images removed for simplicity here -->
            </div>
    </article>
    You will notice that
    Code:
    <img src="img/front-cover.png" class="image_overlay">
    and
    Code:
    <div class="rslides" id="slider1">
    both are enclosed by
    Code:
    <div class="article-row">
    The position of the transparent border
    Code:
    <img src="img/front-cover.png" class="image_overlay">
    is ABSOLUTE and the slideshow
    Code:
    <div class="rslides" id="slider1">
    is RELATIVE (I think) to the div "article".

    The CSS code defining the above html tags I believe to be relevant is here:
    Code:
    .rslides {
      position: relative;
      list-style: none;
      overflow: hidden;
      width: 100%;
      padding: 0;
      margin: 0;
      }
    
    #slider1 {
    	box-shadow: none;
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
    	margin: 0 auto;
      }
    
    .image_overlay {
    	position: absolute;
    	z-index: 5;
    	bottom: auto;
    	left: 0;
    	width: 100%;
    	height: auto;	
       }
    I have sort of come up with something that works (but is not included in the demo I provide (I don't want to cloud you with my confusion) almost perfectly by enclosing
    Code:
    <div class="rslides" id="slider1">
    in a div with padding, using percentage values rather than fixed pixel dimensions:

    I have changed:
    Code:
    <div class="article-row"><!-- just normal paragraph formatting and position -->
        <img src="img/front-cover.png" class="image_overlay"><!-- this is the problem transparent border -->
            <div class="rslides" id="slider1"><!-- this is the slideshow -->
    to

    Code:
    <div class="article-row"><!-- just normal paragraph formatting and position -->
        <img src="img/front-cover.png" class="image_overlay"><!-- this is the problem transparent border -->
            <div class="innerframe">
                <div class="rslides" id="slider1"><!-- this is the slideshow -->
    the CSS for "innerframe" class is set at
    Code:
    .innerframe   {
        padding: 9% 6% 9% 6%;
        )

    I will be forever grateful to be offered a working solution, that fits the slideshow inside the transparent border image and keep that position regardless of which display is used.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,709
    Thanks
    43
    Thanked 3,134 Times in 3,098 Posts
    Blog Entries
    12

    Default

    I think that in order to do what you want, you have to either abandon picturefill and find a way to resize the images in the slideshow based upon % like you do for the overlay. Or keep picturefill and use it on the overlay image as well, matching up different sizes of it to whatever sized images are picked for the slideshow.
    - John
    ________________________

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

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

    CraziestOzzy (06-14-2013)

  4. #3
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your time and effort you put into providing me a solution.
    Picturefill was the smallest and easiest script that I know of that resized images and image file size at the same time and also allowed me to incorporate that same function into a slideshow.
    I will be using picturefill on the transparent overlay as well and have not got around to that next step. From what you advise, I think I should.
    I will apply picturefill to the overlay image and see what happens but I also see (from what you said) that I need to exactly match up all images for each size group in an editor such as photoshop before I do. That way, the slideshow images will fit inside the overlay frame...I hope!
    I will play with the images, code and apply your advice and will get back to you.
    Thanks so much for allowing to think outside the box.

  5. #4
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default thanks again, problem solved.

    Thanks for helping me to think outside my own line of thought.
    I have since resolved the issue of positioning the slideshow and the transparent frame to fit as it should
    As the website reference to my problem will be removed shortly, it will be hard to provide a working example for future reference.

    What I can say, is that I removed the frame overlay image from the html and placed the reference to the image inside CSS. I was then able to use a combination of background-image:url('...'), background-position:center, background-size:X% (where "X" is any value that will fit the frame outside the slideshow. I also set the slide show to have a z-index:-1 (with a position attribute to make z-index work) and that made the slideshow display behind the frame.

    I also was able to use media queries to dish up appropriate sized frames to save on server bandwidth.
    The most important pointer and something I darn well missed, was to have the slide show images SIZED to fit inside the frame in photoshop (my image editor) before even starting with any coding...DOH!!!

    Everything now fits, regardless of what screen size dimension is used.
    I am now happily resizing my display, enjoying the feeling of having everything work
    Thanks again.
    Last edited by CraziestOzzy; 06-14-2013 at 03:51 AM.

Similar Threads

  1. Resolved position relative problem in ie8
    By james438 in forum CSS
    Replies: 3
    Last Post: 09-28-2011, 03:50 AM
  2. PHP GD Transparent Image issue
    By mctoys in forum PHP
    Replies: 0
    Last Post: 05-11-2011, 11:31 AM
  3. Replies: 0
    Last Post: 01-21-2009, 04:56 PM
  4. DHTML Window Widget (Position relative to image not window)
    By QandnotU in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-30-2008, 01:31 AM
  5. position:absolute/relative
    By Tonka in forum JavaScript
    Replies: 1
    Last Post: 09-24-2004, 09:56 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
  •