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
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Position: absolute problem for gallery window in dynamic php page

    I have an image gallery I found at > http://monc.se/kitchen/80/lightweigh...ith-thumbnails. Code for the whole thing I've set below.The main image display window is set w/ a fixed position w/ this CSS code:

    #jgal li img { position: absolute; top: 20px; left: 220px; display: none; }
    I want to use it on dynamic php pages that have constantly changing content. I cannot w/ the fixed position. I need it to float correctly to the right of the thumb sidebar images. I've set it into my .tpl pages & it works well w/ no apparant css conflicts. But the main window is still fixed while the thumbs show wherever I place their code. Any ideas how I can float it all as a unit? Example working not in the php page, just regular HTML > http://www.easysavannah.com/gallerytest4.html
    The large image window on the right is fixed in position in the page. I need it to have a fixed position right where it's at now in relationship to the sidebar on the left. No matter where I place it's code. Thanks, Gene

    PLEASE HELP ME I have an inline css tester that I built w/ help from W3Schools.com's CSS examples. > http://www.easysavannah.com/pmdinlinecsslinks.html Maybe this will help someone here.

    Whole page HTML below:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title>Lightweight Image Gallery</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="imagetoolbar" content="false">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <style media="screen,projection" type="text/css">
    
    /* general styling for this example */
    * { margin: 0; padding: 0; }
    body { padding: 20px; }
    
    /* begin gallery styling */
    #jgal { list-style: none; width: 200px; }
    #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
    #jgal li img { position: absolute; top: 20px; left: 220px; display: none; }
    #jgal li.active img { display: block; }
    #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
    
    /* styling without javascript */
    #gallery { list-style: none; display: block; }
    #gallery li { float: left; margin: 0 10px 10px 0; }
    
        </style>
    
        <!--[if lt IE 8]>
        <style media="screen,projection" type="text/css">
            #jgal li { filter: alpha(opacity=50); }
            #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
        </style>
    	<![endif]-->
        <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
        <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
        <script type="text/javascript">
    var gal = {
        init : function() {
            if (!document.getElementById || !document.createElement || !document.appendChild) return false;
            if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
            var li = document.getElementById('jgal').getElementsByTagName('li');
            li[0].className = 'active';
            for (i=0; i<li.length; i++) {
                li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
                li[i].style.backgroundRepeat = 'no-repeat';
                li[i].title = li[i].getElementsByTagName('img')[0].alt;
                gal.addEvent(li[i],'click',function() {
                    var im = document.getElementById('jgal').getElementsByTagName('li');
                    for (j=0; j<im.length; j++) {
                        im[j].className = '';
                    }
                    this.className = 'active';
                });
            }
        },
        addEvent : function(obj, type, fn) {
            if (obj.addEventListener) {
                obj.addEventListener(type, fn, false);
            }
            else if (obj.attachEvent) {
                obj["e"+type+fn] = fn;
                obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
                obj.attachEvent("on"+type, obj[type+fn]);
            }
        }
    }
    
    gal.addEvent(window,'load', function() {
        gal.init();
    });
        </script>
    </head>
    <body>
    <ul id="gallery">
        <li><img src="http://monc.se/kitchen/stew/gallery/images/je_1.jpg" alt="Josef &amp; Erika 1"></li>
        <li><img src="http://monc.se/kitchen/stew/gallery/images/roland_ads_2.jpg" alt="Roland Ads"></li>
        <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_2.jpg" alt="CD Cover 2"></li>
        <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_1.jpg" alt="CD Cover 1"></li>
        <li><img src="http://monc.se/kitchen/stew/gallery/images/je_3.jpg" alt="Josef &amp; Erika 3"></li>
        <li><img src="http://monc.se/kitchen/stew/gallery/images/je_2.jpg" alt="Josef &amp; Erika 2"></li>
        <li><img src="http://monc.se/kitchen/stew/gallery/images/lktrd_poster1.jpg" alt="LKTRD Poster"></li>
        <li><img src="http://monc.se/kitchen/stew/gallery/images/je_4.jpg" alt="Josef &amp; Erika 4"></li>
        <li><img src="http://monc.se/kitchen/stew/gallery/images/inside_1.jpg" alt="Inside Magazine"></li>
        <li><img src="http://monc.se/kitchen/stew/gallery/images/oceanen_4.jpg" alt="Oceanen"></li>
    </ul>
    
    <p style="clear: both; padding-top: 2em;">Link back to article: <a href="http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails">Lightweight Image Gallery with Thumbnails</a>.</p>
    </body>
    </html>
    It looks better just checking it at > http://www.easysavannah.com/gallerytest4.html
    Any ideas? Thanks again, Gene
    Last edited by gene99; 10-26-2010 at 02:04 AM.

  • #2
    New Coder
    Join Date
    Oct 2010
    Location
    Portsmouth, UK
    Posts
    32
    Thanks
    1
    Thanked 1 Time in 1 Post
    Sorry i dont fully understand what it is you are after?
    if you are able to give me a better idea that i will try to help as much as i can.

    Also you said you wanted it implemented into your php but the links you posted were html???

    sorry might just be me its been a weird day.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I think you're stuck with using position:absolute without rebuilding how the gallery works. However, at the moment the large image is positioned absolutely with respect to the page, so wherever you move the ul to, the big image remains in the same place - which I think is your problem.

    You can amend this by making the following changes:

    Code:
    #jgal {
    list-style:none outside none;
    position:relative;
    width:200px;
    }
    
    #jgal li img {
    display:none;
    left:220px;
    position:absolute;
    top:0;
    }
    Setting position:relative on the ul #jgal means the large image will then be positioned absolutely with respect the the ul, 220px to the right of it, wherever it is. The amended top on the image just aligns it with the top of the ul.


  •  

    Posting Permissions

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