Hello and welcome to our community! Is this your first visit?
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
    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:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <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; }
        <!--[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); }
        <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() {
    <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>
    <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>
    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 03:04 AM.

  • #2
    New Coder
    Join Date
    Oct 2010
    Portsmouth, UK
    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
    Ilkley, West Yorkshire, UK
    Thanked 727 Times in 721 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:

    #jgal {
    list-style:none outside none;
    #jgal li img {
    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