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 14 of 14
  1. #1
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,974
    Thanks
    15
    Thanked 229 Times in 229 Posts

    Chrome doesn't like my javascript.

    Everyone seems to like the image shows where the thumbnails are in a strip along the bottom of the page, and the image pops up in the middle, so I thought I would write a light weight, non-jQuery version, and it works fine on Opera and Firefox ( not yet tested on IE ) but Chrome will not install the needed inline style code, so some parts of it work of work on Chrome, but not the style aspect. Here is the page as generated by php.

    You can see it in action here.

    http://www.myphotowizard.net/Album/index.php
    Code:
    <!DOCTYPE html>
    <head>
    <title>Your photo album</title>
    <meta name="keywords" content="images, thumbnails, cropping, resizing, text, posters, album, galleriy" />
    <meta name="description" content="Your photographic laboratory on the Web." />
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <style>
    body
    {
    margin: 0 auto;
    font-size:24px;
    background:blue;
    }
    #box
    {
    width:960px;
    margin: 0 auto;
    background:aqua;
    padding:24px;
    text-align:left;
    }
    #info
    {
    width:320px;
    height:40px;
    border:1px solid red;
    }
    </style>
    </head>
    <body>
    <div id="box">
    <p id="info">Info</p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Pellentesque congue gravida magna, in accumsan velit aliquam nec.
     Suspendisse condimentum auctor quam nec venenatis.
     
    Roll over the thumbnails with your mouse wheel to slide them.
     
    </div>
    	<div id="show"></div>
    	<div id="cover"></div>
    	<div id="main">
    	<img src="DSC07538.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07538.JPG" title="DSC07538.JPG" />
    	<img src="DSC07540.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07540.JPG" title="DSC07540.JPG" />
    	<img src="DSC07541.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07541.JPG" title="DSC07541.JPG" />
    	<img src="DSC07542.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07542.JPG" title="DSC07542.JPG" />
    	<img src="DSC07543.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07543.JPG" title="DSC07543.JPG" />
    	<img src="DSC07544.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07544.JPG" title="DSC07544.JPG" />
    	<img src="DSC07545.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07545.JPG" title="DSC07545.JPG" />
    	<img src="DSC07546.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07546.JPG" title="DSC07546.JPG" />
    	<img src="DSC07547.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07547.JPG" title="DSC07547.JPG" />
    	<img src="DSC07548.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07548.JPG" title="DSC07548.JPG" />
    	<img src="DSC07549.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07549.JPG" title="DSC07549.JPG" />
    	<img src="DSC07550.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07550.JPG" title="DSC07550.JPG" />
    	<img src="DSC07552.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07552.JPG" title="DSC07552.JPG" />
    	<img src="DSC07553.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07553.JPG" title="DSC07553.JPG" />
    	<img src="DSC07554.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07554.JPG" title="DSC07554.JPG" />
    	<img src="DSC07555.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07555.JPG" title="DSC07555.JPG" />
    	<img src="DSC07556.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07556.JPG" title="DSC07556.JPG" />
    	<img src="DSC07558.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07558.JPG" title="DSC07558.JPG" />
    	<img src="DSC07560.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07560.JPG" title="DSC07560.JPG" />
    	<img src="DSC07561.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07561.JPG" title="DSC07561.JPG" />
    	<img src="DSC07562.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07562.JPG" title="DSC07562.JPG" />
    	<img src="DSC07566.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07566.JPG" title="DSC07566.JPG" />
    	<img src="DSC07567.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07567.JPG" title="DSC07567.JPG" />
    	<img src="DSC07568.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07568.JPG" title="DSC07568.JPG" />
    	<img src="DSC07569.JPG" onmousedown="showThis(this);" onmouseup="hideThis();" class="t" alt="DSC07569.JPG" title="DSC07569.JPG" />
    	</div>
    	<script type="text/javascript" src="./album.js"></script>
    </body>
    </html>
    
    // Here is album.js
    
    	timg=document.getElementsByClassName("t");
    	var cnt = timg.length;
    	var val = 0;
    	var image = new Image();
    	image.onerror = function(){alert('Error')};
    	image.src = timg[0].title;
    	var t_style="left:0;top:0;width:0;height:0;position:absolute;";
    	var I = document.getElementById("info");
    
    var w = document.images[0].width;
    var h = document.images[0].height;
    mn=document.getElementById("main")
    cvr=document.getElementById("cover")
    shw=document.getElementById("show")
    mn.style="position:fixed;bottom:20px;height:"+h+"px;width:100%;overflow:hidden;"
    cvr.style="z-index:20;position:fixed;"
    function initShow(val)
    	{
    	for(j=0;j<cnt;j++)
    	{
    	T_style='border-left-style:solid;border-right-style:solid;border-width:2px;border-color:white;width:'+w+'px;left:'+(((j+val)%cnt)*w)+'px;position:absolute;';
    	timg[j].style=T_style;
    	}
    	}
    function showThis(T)
    	{
     shw.innerHTML='<img src="./Images/'+T.title+'" />';
     shw.style="z-index:30;position:fixed;left:"+(screen.width/2-w*2)+"px;top:100px;";
     cvr.style="width:100%;height:100%;top:0;left:0;position:fixed;background-color:black;opacity:0.85;z=index:10;";
    	}
    	
    function hideThis()
    	{
     shw.innerHTML="";
     shw.style=t_style;
     cvr.style=t_style;
    	}
    function incr(e)
    	{
    	var evt=window.event || e //equalize event object
    	var delta=evt.detail? evt.detail : evt.wheelDelta 
    	if (evt.preventDefault) //disable default wheel action of scrolling page
    	evt.preventDefault()
    	if ( delta < 0 ) del = -1;
    	else if ( delta > 0 ) del = 1;
    	else del = 0;
    	val = (val + del)%cnt;
    	if(val== -1) val=cnt-1;
    	initShow(val);
    	}
    	
    	var wheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
    if(mn.attachEvent) //if IE (and Opera depending on user setting)
         mn.attachEvent("on"+wheelevt, incr)
    else if ( mn.addEventListener) //WC3 browsers
         mn.addEventListener(wheelevt, incr, false);
    
    	image.onload=function(){initShow(val)};
    	hideThis();
    So how can I get Chrome to 'do' inline style ?
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Are you sure initShow is being called?

    At first glance it appears that you're making the classic error of attaching the onload handler after applying the .src value.

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,974
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Quote Originally Posted by Logic Ali View Post
    Are you sure initShow is being called?

    At first glance it appears that you're making the classic error of attaching the onload handler after applying the .src value.
    Yes, I'm sure, because when you click a thumbnail image in Chrome the full size image appears in the 'show' div. And it all works perfectly in Opera and Firefox.

    I found a cheap and dirty workaround that even works in Chrome, using setAttribute to apply the style. But I don't really trust it.

    I just tested it in IE 8, the only version I have and it didn't work there. There's an older version of Opera that throws up the error console, but it does try to work. And an older version of Firefox, it works there with the setAttribute.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    just a flying leap...

    it looks like lines like this:
    Code:
    mn.style="position:fixed;bottom:20px;height:"+h+"px;width:100%;overflow:hidden;"
    cvr.style="z-index:20;position:fixed;"
    would really be better coded using cssText if you're going to do them all in one chunk like that:
    Code:
    mn.style.cssText="position:fixed;bottom:20px;height:"+h+"px;width:100%;overflow:hidden;"
    cvr.style.cssText="z-index:20;position:fixed;"
    or else the much more arduous
    Code:
    mn.style.position="fixed";
    mn.style.bottom="20px";
    // etc
    or it could be that your problem is something else entirely...

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Works even less in IE10 than in Chrome.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,974
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Quote Originally Posted by Old Pedant View Post
    Works even less in IE10 than in Chrome.
    I'm not surprised. I found something that said it may have something to do with Content_Security_Policy in Chrome. I'm just going to check the replies for a bit here, before I do anything..

    PS: Update, here is some info on that. http://developer.chrome.com/extensio...ityPolicy.html

    Notice that it says inline style will not be processed. I was going to put all the code on the one page anyway, so let's see what happens. Check back in a bit.
    Last edited by DrDOS; 08-26-2013 at 02:36 AM. Reason: Udate the folks.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #7
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by DrDOS View Post
    I found a cheap and dirty workaround that even works in Chrome, using setAttribute to apply the style. But I don't really trust it.
    Looking at this again, I would not have expected that string assignment to work.
    Where possible setAttribute should be avoided.
    If cssText doesn't work, you could just apply a className for the fixed properties then just set width and left directly:

    Code:
    timg[j].style.width = w+'px';
    
    timg[j].style.left = (((j+val)%cnt)*w)  + 'px';

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Why not use classes instead of inline styles for fixed styles? Then for dynamic styles, set inline styles individually. For example, element.style.height = h + 'px'

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    It's not at all clear to me why you want to set all those styles dynamically, in any case.

    Why not use <style> and set almost all of them statically?

    Is this kind of what you are after? I left out the mouse wheel stuff, so the line of images at the bottom doesn't scroll, but you can shove that back in.

    Code:
    <!DOCTYPE html>
    <head>
    <title>Your photo album</title>
    <meta name="keywords" content="images, thumbnails, cropping, resizing, text, posters, album, galleriy" />
    <meta name="description" content="Your photographic laboratory on the Web." />
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <style>
    body
    {
        margin: 0 auto;
        font-size:24px;
        background:blue;
    }
    #box
    {
        width:960px;
        margin: 0 auto;
        background:aqua;
        padding:24px;
        text-align:left;
    }
    #info
    {
        width:320px;
        height:40px;
        border:1px solid red;
    }
    #main {
        position:fixed;
        bottom:20px;
        width:100%;
        overflow:hidden;
    }    
    #main img {
    
        border-left-style : solid;
        border-right-style: solid;
        border-width : 2px;
        border-color : white;
        position:absolute;
    }
    
    #cover {
        display: none;
        position:fixed;
        width: 100%; height: 70%;
        top: 0px; left: 0px;
        background-color: black;
        opacity: 0.85;
        z-index: 10;
    }
    #show {
        display: none;
        position: fixed;
        width:816px;
        top: 20px;
        z-index: 30;
    }
    </style>
    </head>
    <body>
    <div id="box">
    <p id="info">Info</p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Pellentesque congue gravida magna, in accumsan velit aliquam nec.
     Suspendisse condimentum auctor quam nec venenatis.
     Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
     Phasellus feugiat consectetur vulputate.
     In hac habitasse platea dictumst.
     Vestibulum vestibulum tincidunt laoreet.
     Cras tincidunt, tortor at pellentesque aliquet, dui nibh lacinia magna, lacinia pulvinar libero risus nec felis.
     Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
     Sed a velit et diam pulvinar ultrices.
     Cras pharetra, sapien eget egestas tristique, orci risus euismod mi, eget pretium nulla tortor at velit.
     Sed congue nibh et mauris molestie fringilla.
     Ut enim lectus, molestie ut malesuada vitae, elementum eget odio.
     Quisque feugiat arcu vitae sem semper quis condimentum velit pellentesque.
     Aenean dignissim lectus vel lorem faucibus sit amet euismod velit accumsan.
     Nullam non quam lorem, a sodales est.
     Nulla arcu libero, semper ut aliquam non, blandit in nunc.
     Morbi ipsum mauris, condimentum a hendrerit a, molestie pretium orci.
     Vivamus hendrerit leo sit amet felis vestibulum ac mattis ante bibendum.
    
    </div>
        <div id="show"><img id="showImage" /></div>
        <div id="cover"></div>
        <div id="main">
        <img src="http://www.myphotowizard.net/Album/DSC07538.JPG" alt="DSC07538.JPG" title="DSC07538.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07540.JPG" alt="DSC07540.JPG" title="DSC07540.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07541.JPG" alt="DSC07541.JPG" title="DSC07541.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07542.JPG" alt="DSC07542.JPG" title="DSC07542.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07543.JPG" alt="DSC07543.JPG" title="DSC07543.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07544.JPG" alt="DSC07544.JPG" title="DSC07544.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07545.JPG" alt="DSC07545.JPG" title="DSC07545.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07546.JPG" alt="DSC07546.JPG" title="DSC07546.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07547.JPG" alt="DSC07547.JPG" title="DSC07547.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07548.JPG" alt="DSC07548.JPG" title="DSC07548.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07549.JPG" alt="DSC07549.JPG" title="DSC07549.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07550.JPG" alt="DSC07550.JPG" title="DSC07550.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07552.JPG" alt="DSC07552.JPG" title="DSC07552.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07553.JPG" alt="DSC07553.JPG" title="DSC07553.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07554.JPG" alt="DSC07554.JPG" title="DSC07554.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07555.JPG" alt="DSC07555.JPG" title="DSC07555.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07556.JPG" alt="DSC07556.JPG" title="DSC07556.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07558.JPG" alt="DSC07558.JPG" title="DSC07558.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07560.JPG" alt="DSC07560.JPG" title="DSC07560.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07561.JPG" alt="DSC07561.JPG" title="DSC07561.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07562.JPG" alt="DSC07562.JPG" title="DSC07562.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07566.JPG" alt="DSC07566.JPG" title="DSC07566.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07567.JPG" alt="DSC07567.JPG" title="DSC07567.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07568.JPG" alt="DSC07568.JPG" title="DSC07568.JPG" />
        <img src="http://www.myphotowizard.net/Album/DSC07569.JPG" alt="DSC07569.JPG" title="DSC07569.JPG" />
        </div>
    <script type="text/javascript">
    (
      function()
      {
          mn = document.getElementById("main");
          cvr = document.getElementById("cover");
          shw = document.getElementById("show");
          timgs = mn.getElementsByTagName("img");
          mainimg = document.getElementById("showImage");
              
          var cnt = timgs.length;
          var val = 0;
    
          var pixw, pixh;
          timgs[0].onload = function( )
          {
              pixw = timgs[0].width;
              pixh = timgs[0].height;
              mn.style.height = pixh + "px";
    
              for( j=0; j<cnt; j++ )
              {
                  var pic = timgs[j];
                  pic.style.width = pixw + "px";
                  pic.style.left  = ( ( ( j + val ) % cnt ) * pixw ) + "px"; 
                  pic.onmouseover = showThis;
                  pic.onmouseout  = hideThis;
              }
          }
               
          function showThis( )
          {
              mainimg.src = "http://www.myphotowizard.net/Album/Images/" + this.title;
              cvr.style.display = "block";
              shw.style.left = Math.round( ( cvr.offsetWidth - 816 ) / 2 ) + "px";
              shw.style.display = "block";
          }
          function hideThis( )
          {
              shw.style.display = "none";
              cvr.style.display = "none";
          } 
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    By the by... You cover can *NOT* be 100% height. If it is, then as soon as it turns on, the onmouseout of the small image triggers, and so then the cover and large image disappear. Which triggers the onmouseover which means the cover appears and that causes onmousout to trigger. Which...

    Can you say "flickerville"?

    And also by the by: My code works in MSIE 10, FF, and Chrome. All that I happen to have to test with right now.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,974
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Quote Originally Posted by Old Pedant View Post
    By the by... You cover can *NOT* be 100% height. If it is, then as soon as it turns on, the onmouseout of the small image triggers, and so then the cover and large image disappear. Which triggers the onmouseover which means the cover appears and that causes onmousout to trigger. Which...

    Can you say "flickerville"?

    And also by the by: My code works in MSIE 10, FF, and Chrome. All that I happen to have to test with right now.
    There are several good reasons why I'm doing it this way. I want this to be what I call a 'drop in', you just have to use one or two lines of code to include it in a page, and it doesn't take over the page, the way Lightbox does. All that you see on the page is the strip of thumbs on the bottom, until you click one. I can't use style tags because it would no longer be a drop in. The way I've got it it works very well for two of the four browsers tested so far, but I'm still trying stuff. Because of the z-index settings the cover works just the way it should, with height:100%; you can drag the thumb picture up into the body after holding the mouse down and the large image will stay put, and the small images are still clickable.
    Last edited by DrDOS; 08-26-2013 at 03:28 AM.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #12
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,974
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Quote Originally Posted by glenngv View Post
    Why not use classes instead of inline styles for fixed styles? Then for dynamic styles, set inline styles individually. For example, element.style.height = h + 'px'
    The reason I'm using inline styles is so it can be included in a page with only one or two lines of code, but I will try your suggestion about coding the style this way, it's actually the way I usually do it with JS. And I'm already using classes, but not with css.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    What the heck...here's a version complete with the mousewheel working. Not quite the way you had it, but I think perhaps actually more effectively. Feel free to muck around with it, of course.
    Code:
    <!DOCTYPE html>
    <head>
    <title>Your photo album</title>
    <meta name="keywords" content="images, thumbnails, cropping, resizing, text, posters, album, galleriy" />
    <meta name="description" content="Your photographic laboratory on the Web." />
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <style>
    body
    {
        margin: 0 auto;
        font-size:24px;
        background:blue;
    }
    #box
    {
        width:960px;
        margin: 0 auto;
        background:aqua;
        padding:24px;
        text-align:left;
    }
    #info
    {
        width:320px;
        height:40px;
        border:1px solid red;
    }
    #mainholder {
        position:fixed;
        width: 100%; 
        bottom:20px;
        overflow:hidden;
    }    
    #main {
        position: absolute;
    }
    #main img {
    
        border-left-style : solid;
        border-right-style: solid;
        border-width : 2px;
        border-color : white;
        position:absolute;
    }
    
    #cover {
        display: none;
        position:fixed;
        width: 100%; height: 70%;
        top: 0px; left: 0px;
        background-color: black;
        opacity: 0.85;
        z-index: 10;
    }
    #show {
        display: none;
        position: fixed;
        width:816px;
        top: 20px;
        z-index: 30;
    }
    </style>
    </head>
    <body>
    <div id="box">
    <p id="info">Info</p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Pellentesque congue gravida magna, in accumsan velit aliquam nec.
     Suspendisse condimentum auctor quam nec venenatis.
     Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
     Phasellus feugiat consectetur vulputate.
     In hac habitasse platea dictumst.
     Vestibulum vestibulum tincidunt laoreet.
     Cras tincidunt, tortor at pellentesque aliquet, dui nibh lacinia magna, lacinia pulvinar libero risus nec felis.
     Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
     Sed a velit et diam pulvinar ultrices.
     Cras pharetra, sapien eget egestas tristique, orci risus euismod mi, eget pretium nulla tortor at velit.
     Sed congue nibh et mauris molestie fringilla.
     Ut enim lectus, molestie ut malesuada vitae, elementum eget odio.
     Quisque feugiat arcu vitae sem semper quis condimentum velit pellentesque.
     Aenean dignissim lectus vel lorem faucibus sit amet euismod velit accumsan.
     Nullam non quam lorem, a sodales est.
     Nulla arcu libero, semper ut aliquam non, blandit in nunc.
     Morbi ipsum mauris, condimentum a hendrerit a, molestie pretium orci.
     Vivamus hendrerit leo sit amet felis vestibulum ac mattis ante bibendum.
    
    </div>
        <div id="show"><img id="showImage" /></div>
        <div id="cover"></div>
        <div id="mainholder">
            <div id="main">
                <img src="http://www.myphotowizard.net/Album/DSC07538.JPG" alt="DSC07538.JPG" title="DSC07538.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07540.JPG" alt="DSC07540.JPG" title="DSC07540.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07541.JPG" alt="DSC07541.JPG" title="DSC07541.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07542.JPG" alt="DSC07542.JPG" title="DSC07542.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07543.JPG" alt="DSC07543.JPG" title="DSC07543.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07544.JPG" alt="DSC07544.JPG" title="DSC07544.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07545.JPG" alt="DSC07545.JPG" title="DSC07545.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07546.JPG" alt="DSC07546.JPG" title="DSC07546.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07547.JPG" alt="DSC07547.JPG" title="DSC07547.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07548.JPG" alt="DSC07548.JPG" title="DSC07548.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07549.JPG" alt="DSC07549.JPG" title="DSC07549.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07550.JPG" alt="DSC07550.JPG" title="DSC07550.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07552.JPG" alt="DSC07552.JPG" title="DSC07552.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07553.JPG" alt="DSC07553.JPG" title="DSC07553.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07554.JPG" alt="DSC07554.JPG" title="DSC07554.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07555.JPG" alt="DSC07555.JPG" title="DSC07555.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07556.JPG" alt="DSC07556.JPG" title="DSC07556.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07558.JPG" alt="DSC07558.JPG" title="DSC07558.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07560.JPG" alt="DSC07560.JPG" title="DSC07560.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07561.JPG" alt="DSC07561.JPG" title="DSC07561.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07562.JPG" alt="DSC07562.JPG" title="DSC07562.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07566.JPG" alt="DSC07566.JPG" title="DSC07566.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07567.JPG" alt="DSC07567.JPG" title="DSC07567.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07568.JPG" alt="DSC07568.JPG" title="DSC07568.JPG" />
                <img src="http://www.myphotowizard.net/Album/DSC07569.JPG" alt="DSC07569.JPG" title="DSC07569.JPG" />
            </div>
        </div>
    <script type="text/javascript">
    (
      function()
      {
          var mn = document.getElementById("main");
          var cvr = document.getElementById("cover");
          var shw = document.getElementById("show");
          var timgs = mn.getElementsByTagName("img");
          var mainimg = document.getElementById("showImage");
          var holder = document.getElementById("mainholder");
              
          var cnt = timgs.length;
          var mainLeft = 0;
          var mainWidth = 0;
          var mainMin = 0;
    
          var pixw, pixh;
          timgs[0].onload = function( )
          {
              pixw = timgs[0].width;
              pixh = timgs[0].height;
              mn.style.height = pixh + "px";
              holder.style.height = pixh + "px"; // adjust for boders if wanted
    
              for( j=0; j<cnt; j++ )
              {
                  var pic = timgs[j];
                  pic.style.width = pixw + "px";
                  pic.style.left  = ( j * pixw ) + "px"; 
                  pic.onmouseover = showThis;
                  pic.onmouseout  = hideThis;
              }
              mainWidth = ( cnt * pixw );
              mn.style.width = mainWidth + "px";
              mainMin = mainWidth - holder.offsetWidth;
          }
               
          function showThis( )
          {
              mainimg.src = "http://www.myphotowizard.net/Album/Images/" + this.title;
              cvr.style.display = "block";
              shw.style.left = Math.round( ( cvr.offsetWidth - 816 ) / 2 ) + "px";
              shw.style.display = "block";
          }
          function hideThis( )
          {
              shw.style.display = "none";
              cvr.style.display = "none";
          } 
          var wheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
          // MSIE 10 supports both, but addEventListener preferred, so test it first:
          if ( mn.addEventListener) { mn.addEventListener(wheelevt, incr, false); }
          else if( mn.attachEvent ) { mn.attachEvent("on"+wheelevt, incr); }
          
          function incr( e )
          {
    	      var evt=window.event || e //equalize event object
    	      var delta = evt.detail ? evt.detail : evt.wheelDelta       
          	  if (evt.preventDefault) {	evt.preventDefault(); }
    	      mainLeft += delta;
    	      if ( mainLeft > 0 ) { mainLeft = 0; }
    	      else if ( mainLeft < -mainMin ) { mainLeft = -mainMin; }
    	      mn.style.left = mainLeft + "px";
    	      // debug: document.getElementById("info").innerHTML = "MAINLEFT: " + mainLeft;
          }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,974
    Thanks
    15
    Thanked 229 Times in 229 Posts
    You guys did great, I have it working with php, and it's everything I want so far. Haven't checked it in IE, but it works in Opera, Firefox and Chrome now. You just have to put this link at the bottom of your page. And it doesn't interfere with the normal working of the page except for the strip at the bottom.

    <?php include "./album.php"; ?>
    </body>

    And it adds everything needed. This is album.php.
    PHP Code:
    <?php    
        
    include "./images.php";
        
    $cnt count($my_images);
        
    $data getimagesize($my_images[0]);
        echo 
    '    <div id="show"></div>
        <div id="cover"></div>
        <div id="main" style="position:fixed;bottom:20px;overflow:hidden;width:100%;height:'
    .($data[1]-10).'px;">';
    for(
    $i=0;$i<$cnt;$i++)
        {
        echo 
    '
        <img src="'
    .$my_images[$i].'" class="t" alt="'.$my_images[$i].'" title="'.$my_images[$i].'" style="left:'.((($i)%$cnt)*$data[0]).'px;border-left-style:solid;border-right-style:solid;border-width:2px;border-color:white;top:0px;width:'.$data[0].'px;position:absolute;" />';
        }
        echo 
    '
        </div>
        <script type="text/javascript" >
        (
      function()
      {
        timg=document.getElementsByClassName("t");
        var cnt = timg.length;
        var val = 0;
        var image = new Image();
        image.onerror = function(){alert("Error")};
        image.src = timg[cnt-1].title;
        var t_style="left:0;top:0;width:0;height:0;position:fixed;";
        var I = document.getElementById("info");

    var w = timg[0].width;
    var h = timg[0].height;
    mn=document.getElementById("main");
    cvr=document.getElementById("cover");
    shw=document.getElementById("show");
    function initShow(val)
        {
        for(j=0;j<cnt;j++)
        {
        timg[j].style.left=(j+val)%cnt*w+"px";
        timg[j].onmousedown=showThis;
        timg[j].onmouseup=hideThis;
        }
        }
    function showThis()
        {
     shw.innerHTML="<img src=\"./Images/"+this.title+"\" />";
     shw.style.cssText="z-index:30;position:fixed;left:"+(screen.width/2-w*2)+"px;top:100px;";
     cvr.style.cssText="width:100%;height:100%;top:0;left:0;position:fixed;background-color:black;opacity:0.85;z=index:10;";
        }
    function hideThis()
        {
     shw.innerHTML="";
     shw.style.cssText=t_style;
     cvr.style.cssText=t_style;
        }
    function incr(e)
        {
        var evt=window.event || e //equalize event object
        var delta=evt.detail? evt.detail : evt.wheelDelta 
        if (evt.preventDefault) //disable default wheel action of scrolling page
        evt.preventDefault()
        if ( delta < 0 ) del = -1;
        else if ( delta > 0 ) del = 1;
        else del = 0;
        val = (val + del)%cnt;
        if(val== -1) val=cnt-1;
        initShow(val);
        }
        var wheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF not recognize mousewheel as of FF3.x
    if(mn.attachEvent) //if IE (and Opera depending on user setting)
         mn.attachEvent("on"+wheelevt, incr)
    else if ( mn.addEventListener) //WC3 browsers
         mn.addEventListener(wheelevt, incr, false);

        image.onload=function(){initShow(val)};
        hideThis();
          }
    )();
        </script>'
    ;
    ?>
    This is what images.php looks like.
    PHP Code:
    <?php
    $my_images
    =array(
    "DSC07538.JPG",
    "DSC07540.JPG",
    "DSC07541.JPG",
    "DSC07542.JPG",
    "DSC07543.JPG",
    "DSC07544.JPG",
    "DSC07545.JPG",
    "DSC07546.JPG",
    "DSC07569.JPG");
    ?>
    The thumbnails go in the main folder, the full images go in subfolder Images. The first thumbnail in the folder determines the settings. And that's all there is to it. BTW, steal my mousewheel code, except for direction it makes the page behave the same regardless of mouse or browser.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

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