SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    West Chester, PA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Modifying A Simple Image Gallery - dymanic links?

    I found A Simple Javascript Image Gallery over at cross-browser.com
    http://www.cross-browser.com/x/examples/img_gallery.php

    and i really like the way it works for a somewhat dynamic client side way of creating a gallery.

    I am interested however in modifying the following code so that i can wrap the images in link tags so that the user can click on the thumbnails and open up the full size image.

    I know how to make links via standard HTML but am interested in using the same method as the img tags are created so it is more dynamic (and very clean)

    Mike if you can offer any insight it would be greatly appreciated as my JS skills are lacking

    Thanks and ROCK ON!

    Code:
    <script type='text/javascript'>
    window.onload = function()
    {
        if (window.winOnLoad) window.winOnLoad();
    }
    </script>
    
    <style type='text/css'>
    #prev, #next {
      font-weight:bold;
      margin-right:20px;
    }
    </style>
    
    <script type='text/javascript'>
    var imgsPerPg = 5;
    var imgsMax = 30;
    
    function winOnLoad()
    {
      if (document.getElementById) {
        var n = 1, a = xGetURLArguments();
        if (a.length) {
          n = parseInt(a[0]);
          if (n <= 0 || n > imgsMax) {
            n = 1;
          } 
        }
        setImages(n);
        setLinks(n);
      }
    }
    function setImages(firstNum)
    {
      var i, img, id;
      for (i = 0; i < imgsPerPg; ++i) {
        id = leadingZeros(i+1);
        img = document.getElementById(id);
        img.alt = img.src = 'thumbnails/' + leadingZeros(firstNum + i) + '.jpg';
      }  
    }
    function setLinks(firstNum)
    {
      var n = document.getElementById('next');
      if (firstNum + imgsPerPg < imgsMax) {
        n.href = 'gallery.html?n=' + (firstNum + imgsPerPg);
      }
      else {
        n.style.visibility = 'hidden';
      }
      var p = document.getElementById('prev');
      if (firstNum > imgsPerPg) {
        p.href = 'gallery.html?n=' + (firstNum - imgsPerPg);
      }
      else {
        p.style.visibility = 'hidden';
      }
    }
    function xGetURLArguments()
    {
      var idx = location.href.indexOf('?');
      var params = new Array();
      if (idx != -1) {
        var pairs = location.href.substring(idx+1, location.href.length).split('&');
        for (var i=0; i<pairs.length; i++) {
          nameVal = pairs[i].split('=');
          params[i] = nameVal[1];
          params[nameVal[0]] = nameVal[1];
        }
      }
      return params;
    }
    function leadingZeros(num) { 
        if ( num < 10) return "00" + num; 
        else if ( (num > 9) && (num < 100) ) return "0" + num; 
        else if ( num > 99 ) return "" + num; 
    }
    </script>
    
    </head>
    <body>
    
    <h3>page title</h3>
    <div>
      <img id='001'>
      <img id='002'>
      <img id='003'>
      <img id='004'>
      <img id='005'>
    </div>
    <div>
      <a id='prev' href=''>&lt;&lt; Previous</a>
      <a id='next' href=''>Next &gt;&gt;</a>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Oct 2003
    Location
    West Chester, PA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i thinkwhat i am trying for is somethign like this...

    Code:
    <div>
      <a id='001' href=''><img id='001'></a>
      <a id='002' href=''><img id='002'></a>
      <a id='003' href=''><img id='003'></a>
      <a id='004' href=''><img id='004'></a>
    
      <a id='005' href=''><img id='005'></a>
    </div>
    i have modded the JS as I thought it would work - it kinda does in that it puts the approriate links around the images - works liek a charm - but the images dont show up now! any thoughts?

    function setLinks(firstNum)
    {
    var n = document.getElementById('next');
    if (firstNum + imgsPerPg < imgsMax) {
    n.href = 'gallery.html?n=' + (firstNum + imgsPerPg);
    }
    else {
    n.style.visibility = 'hidden';
    }
    var p = document.getElementById('prev');
    if (firstNum > imgsPerPg) {
    p.href = 'gallery.html?n=' + (firstNum - imgsPerPg);
    }
    else {
    p.style.visibility = 'hidden';
    }
    var i, a, id;
    for (i = 0; i < imgsPerPg; ++i) {
    id = leadingZeros(i+1);
    a = document.getElementById(id);
    a.href = 'images/' + leadingZeros(firstNum + i) + '.jpg';
    }

    }
    i added the bolded text myself..

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi CliffHanger9,

    Thanks, glad you like my little toy

    Good work, your js should work - but remember that every 'id' must be unique in the document.

    Here's another way to do it.

    I added this CSS:
    Code:
    img {
      cursor:pointer;
    }
    I modified a function and added one:
    Code:
    function setImages(firstNum)
    {
      var i, img, id, src;
      for (i = 0; i < imgsPerPg; ++i) {
        id = leadingZeros(i+1);
        img = document.getElementById(id);
        src = 'images/' + leadingZeros(firstNum + i);
        img.title = 'Click to view large image';
        img.alt = img.src = src + '_tn.jpg'; // img to load now
        img.onClickSrc = src + '.jpg'; // img to load onclick
        img.onclick = imgOnClick;
      }  
    }
    function imgOnClick()
    {
      window.location = this.onClickSrc;
    }
    The A elements are not needed in the HTML now. It's a simple little javascript-only thingy anyhow

  4. #4
    SitePoint Member
    Join Date
    Oct 2003
    Location
    West Chester, PA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow excellent mike - thats brilliant!

    i am really liking this more and more - that last modification worked very well

    i guess there is no way to hide the ones that dont exist though eh?
    for example if you set the max images to 40 but you only have 35 pictures then on a page that is displaying 20 pictures per page, there are 5 empty slots with the wee red X's in them. anyway to hide those?


    also, as i play around with these i am thinking of sending the image id to a template page that would be an html page with the image dynamically loaded depending on the vars you pass into it - rather than just load the image with no navigation back to the gallery

    the advantage of this html page is that i could put a link back to the gallery page as well as create a slideshow type mechanism with a forward backward type arrows so the user could advance (or reverse) the large images.

    so i was thinking if i modified the code to this...

    function setImages(firstNum)
    {
    var i, img, id, src;
    for (i = 0; i < imgsPerPg; ++i) {
    id = leadingZeros(i+1);
    img = document.getElementById(id);
    src = 'images/' + leadingZeros(firstNum + i);
    img.title = 'Click to view large image';
    img.alt = img.src = src + '_tn.jpg'; // img to load now
    img.onClickSrc = 'slide.html?pic=' + id; // img to load onclick
    img.onclick = imgOnClick;
    }
    }
    then that would pass the var into the slide.html page, which would be a very simple layout - basically just have an image placeholder (that would load the image based on the id captured from the url string) and a set of previous/next links to create a slideshow effect

    In fact to accomplish this a similar mechanism as your gallery to capture the pic id (..slide.html?pic=003) as well as your previous/next mechanism to advance the slideshow would probably work, right?

    Have you done this (or something similar) already Mike? If so I would be interested in seeing it..

    If not, any suggestions on how to go about this?

    Again, thanks Mike - I admire your work! rock on!

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much, CliffHanger9

    For the first question (hide those that don't exist), I added one line to setImages() and added a function:
    Code:
    function setImages(firstNum)
    {
      var i, img, id, src;
      for (i = 0; i < imgsPerPg; ++i) {
        id = leadingZeros(i+1);
        img = document.getElementById(id);
        src = 'images/' + leadingZeros(firstNum + i);
        img.title = 'Click to view large image';
        img.alt = img.src = src + '_tn.jpg'; // img to load now
        img.onClickSrc = src + '.jpg'; // img to load onclick
        img.onclick = imgOnClick;
        img.onerror = imgOnError; // I added this line
      }  
    }
    function imgOnError()
    {
      this.style.display = 'none';
    }
    For your second question, no I don't think I have any demo that's like that - except... this img_gallery demo might work - just set imgsPerPg to 1 and probably have to modify a few other little things.

  6. #6
    SitePoint Member
    Join Date
    Oct 2003
    Location
    West Chester, PA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster
    For your second question, no I don't think I have any demo that's like that - except... this img_gallery demo might work - just set imgsPerPg to 1 and probably have to modify a few other little things.
    good thinking!!

    I tryed this with the following code...

    gallery.html
    Code:
    <html>
    <head>
    <title>Image Gallery</title>
    
    <style type="text/css">
    #galPrev, #galNext {
      font-weight:bold;
      margin-right:20px;
    }
    img {
      cursor:pointer;
    }
    </style>
    
    <script type="text/javascript">
    
    var imgsPerPg = 20;
    var imgsMax = 40;
    
    window.onload = function()
    {
        if (window.winOnLoad) window.winOnLoad();
    }
    
    function winOnLoad()
    {
      if (document.getElementById) {
        var n = 1, a = xGetURLArguments();
        if (a.length) {
          n = parseInt(a[0]);
          if (n <= 0 || n > imgsMax) {
            n = 1;
          } 
        }
        setImages(n);
        setLinks(n);
      }
    }
    function setImages(firstNum)
    {
      var i, img, id, src;
      for (i = 0; i < imgsPerPg; ++i) {
        id = leadingZeros(i+1);
        img = document.getElementById(id);
        src = 'images/' + leadingZeros(firstNum + i);
        img.title = 'Click to view large image';
        img.alt = img.src = src + '_tn.jpg'; // img to load now
        img.onClickSrc = 'slide.html?pid=' + leadingZeros(firstNum + i); // img to load onclick
        img.onclick = imgOnClick;
        img.onerror = imgOnError;
      }  
    }
    function imgOnClick()
    {
      window.location = this.onClickSrc;
    }
    function imgOnError()
    {
      this.style.display = 'none';
    }
    
    function setLinks(firstNum)
    {
      var n = document.getElementById('galNext');
      if (firstNum + imgsPerPg < imgsMax) {
        n.href = 'gallery.html?n=' + (firstNum + imgsPerPg);
      }
      else {
        n.style.visibility = 'hidden';
      }
      var p = document.getElementById('galPrev');
      if (firstNum > imgsPerPg) {
        p.href = 'gallery.html?n=' + (firstNum - imgsPerPg);
      }
      else {
        p.style.visibility = 'hidden';
      }
    }
    
    function xGetURLArguments()
    {
      var idx = location.href.indexOf('?');
      var params = new Array();
      if (idx != -1) {
        var pairs = location.href.substring(idx+1, location.href.length).split('&');
        for (var i=0; i<pairs.length; i++) {
          nameVal = pairs[i].split('=');
          params[i] = nameVal[1];
          params[nameVal[0]] = nameVal[1];
        }
      }
      return params;
    }
    
    function leadingZeros(num) { 
        if ( num < 10) return "00" + num; 
        else if ( (num > 9) && (num < 100) ) return "0" + num; 
        else if ( num > 99 ) return "" + num; 
    }
    
    </script>
    
    </head>
    <body>
    
    <h3>page title</h3>
    <div>
      <img id="001">
      <img id="002">
      <img id="003">
      <img id="004">
      <img id="005">
    </div>
    <div>
      <img id="006">
      <img id="007">
      <img id="008">
      <img id="009">
      <img id="010">
    </div>
    <div>
      <img id="011">
      <img id="012">
      <img id="013">
      <img id="014">
      <img id="015">
    </div>
    <div>
      <img id="016">
      <img id="017">
      <img id="018">
      <img id="019">
      <img id="020">
    </div>
    <div>
      <a id="galPrev" href="">&lt;&lt; Previous 20</a>
      <a id="galNext" href="">Next 20 &gt;&gt;</a>
    </div>
    
    </body>
    </html>
    slide.html
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Image Slide</title>
    
    <style>
    	.singleSlide {text-align: center}
    	.slideControls {text-align: center}
    </style>
    
    <script type="text/javascript">
    
    
    window.onload = function()
    {
        if (window.winOnLoad) window.winOnLoad();
    }
    
    var imgsPerPg = 1;
    var imgsMax = 34;
    
    
    function winOnLoad()
    {
      if (document.getElementById) {
        var n = 1, a = xGetURLArguments();
        if (a.length) {
          n = parseInt(a[0]);
          if (n <= 0 || n > imgsMax) {
            n = 1;
          } 
        }
        setImages(n);
        setLinks(n);
      }
    }
    
    function setImages(firstNum)
    {
      var i, img, id, src;
      for (i = 0; i < imgsPerPg; ++i) {
        id = leadingZeros(i+1);
        img = document.getElementById(id);
        src = 'images/' + leadingZeros(firstNum + i);
        img.alt = img.src = src + '.jpg'; // img to load now
      }  
    }
    
    function setLinks(firstNum)
    {
      var n = document.getElementById('slideNext');
      if (firstNum + imgsPerPg < imgsMax) {
        n.href = 'slide.html?pid=' + leadingZeros(firstNum + imgsPerPg);
      }
      else {
        n.style.visibility = 'hidden';
      }
      var p = document.getElementById('slidePrev');
      if (firstNum > imgsPerPg) {
        p.href = 'slide.html?pid=' + leadingZeros(firstNum - imgsPerPg);
      }
      else {
        p.style.visibility = 'hidden';
      }
    }
    
    function xGetURLArguments()
    {
      var idx = location.href.indexOf('?');
      var params = new Array();
      if (idx != -1) {
        var pairs = location.href.substring(idx+1, location.href.length).split('&');
        for (var i=0; i<pairs.length; i++) {
          nameVal = pairs[i].split('=');
          params[i] = nameVal[1];
          params[nameVal[0]] = nameVal[1];
        }
      }
      return params;
    }
    
    function leadingZeros(num) { 
        if ( num < 10) return "00" + num; 
        else if ( (num > 9) && (num < 100) ) return "0" + num; 
        else if ( num > 99 ) return "" + num; 
    }
    
    
    
    </script>
    
    </head>
    <body>
    
    <div class="singleSlide">
      <img id="001">
    </div>
    <div class="slideControls">
      <a id="slidePrev" href="">&lt;&lt; Previous</a>
      <a id="slideNext" href="">Next &gt;&gt;</a>
    </div>
    </body>
    </html>

    ...seems to work but for some reason it only works properly for the first 7 images in the gallery. then it resets to 001...

    any suggestions would be GREATLY appreciated! I m so close - just some little bug i guess but i dont know enough about your script to figure it out without another set of javascript guru eyes..

    ...a live example - same thing as code above just in action with pictures..

    THANKS FOR YOUR PATIENCE MIKE!!!!!!!!!!!!!!!!!!!

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey that's pretty slick! It's the first time I've seen it work with images. Adding the slide page was a great idea - it really needs that.

    I didn't see any problem, I was able to navigate among all 34 images.

    Very cool
    I wish I was on one of those sailboats right now

  8. #8
    SitePoint Member
    Join Date
    Oct 2003
    Location
    West Chester, PA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster
    Hey that's pretty slick! It's the first time I've seen it work with images. Adding the slide page was a great idea - it really needs that.

    I didn't see any problem, I was able to navigate among all 34 images.

    Very cool
    I wish I was on one of those sailboats right now

    hehe thanks - i think it is a pretty cool addition also but if you look closer you will notice that after the 7th image, the pictures that you click do not match up to the picture that shows up..

    this is a good example..

    http://hellfire.dusers.drexel.edu/~dusail/NewSite/pictures/OCCFall04/slide.html?pid=008

    as you can see, i am loading a photo id of 008 into the URL. But when you hold the mouse over the image that actually loads, the alt text reads "images/001.jpg" and not coincidentaly displays the 001.jpg image

    I first noticed this when I clicked the 20th image on the first gallery page ( http://hellfire.dusers.drexel.edu/~d...4/gallery.html ) - the thumbnail accurately shows people standing on a dock but when you click it, the image that shows up in the slide, is 3 boats sailing in the bay - not people standing on a dock. Also when you advance forward in the slide view, it hits 001 when it should hit 008 and the controls that should be available for 008 are now limited to the previous link; exactly like the 001 slide should have.

    Do you see my dilema? it is quite bizarre why it would do this only after every 7..

    Hope you can help! I appreciate everything to this point, I really do! Thanks again!

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I see the problem now in IE. Opera was not showing a problem - but it should have. IE was properly returning a 1 for parseInt('008') because the leading zero indicates 'octal'.

    Add a 'radix' argument to the parseInt() calls in both gallery and slide files:
    Code:
          n = parseInt(a[0], 10);
    And, as a simplification step (optional - it will be ok without doing this), change this line (in the gallery file)...
    Code:
        img.onClickSrc = 'img_viewer.html?pid=' + leadingZeros(firstNum + i); // img to load onclick
    ...to this...
    Code:
        img.onClickSrc = 'img_viewer.html?pid=' + (firstNum + i); // img to load onclick
    ...because we're going to convert pid to a number anyway so we don't need to pad it with zeros.

    Great work!

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, btw...

    This...
    Code:
    window.onload = function()
    {
        if (window.winOnLoad) window.winOnLoad();
    }
    Is only there because it is part of how I implement my (very simple) php template system. So you don't need that. Just put the contents of winOnLoad() in window.onload.

  11. #11
    SitePoint Member
    Join Date
    Oct 2003
    Location
    West Chester, PA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent!

    Tis coming together really well, Mike, THANKS AGAIN! ROCK ON!

    I noticed that on your site you were working on a back to gallery link and read yoru blurb about consolidating them into 1 script..

    Sounds awesome - I ll check keep checking in to see how you go with this..

    Thanks again man - I like this script alot and really appreciate you taking the time to help me refine it

    Dan

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome I've enjoyed us working together on this. We've really improved the demo - and it has even more potential now.

    Did you notice that the back to gallery link takes you back to the gallery page which contains the thumbnail for the current large pic?

    Have a great day


    Edit:

    btw... I've moved the demo out of the X Examples section because it doesn't use the X library. It is here now.
    Last edited by MikeFoster; Jan 26, 2005 at 08:13.

  13. #13
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I combined the two scripts into one. Still needs some work, but it's shaping up nicely

  14. #14
    SitePoint Member
    Join Date
    Oct 2003
    Location
    West Chester, PA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes i did notice that as a matter of fact! excellent

    only thing i noticed (totally not a big deal) is that if you click an image on the second page (and probably others after one) it takes you to the proper slide but then when you click go bakc to gallery it takes you almost back to the same gallery...the first and last slides are different

    so if you are in the gallery page 1 and it has thumbnails 1-20, you click next and view thumbnails 21-40, you click image 28 for example, slide 28 comes up all is good to this point. you click return to gallery, you are now viewing thumbnails 20-39 vs 21-40

    like i said not really a big deal just somethign i caught.. probably something very small and simple

    rock on!

  15. #15
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! Good catch, I missed that

    I think I've fixed it.

  16. #16
    SitePoint Member
    Join Date
    Oct 2003
    Location
    West Chester, PA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow mike this is really great..

    I m convinced that this is perhaps the best javascript based gallery mechanism out there.

    serisously.

    Thought of something else.. ...what about adding an auto advance slideshow type option?

    I have seen some other javascripts that you click play and just rotate through a bunch of pics on arrays and all kinds of nonsense...but it seems like it wouldnt be to tough to add a settimeout(function, 3000) to your script that would trigger the next link (according to how long you set the timeout to be obviously)

    the problem is i dont understand which function to plug in there..

    also would we have to load another var into the url since it basically reloads the page everytime? like img_gallery.html?s=004&auto=true in order to tell it to repeat the cycle? if i understand it correctly, this thing would only timeout once before it went to the next page. and then since the default bahaviour for the single slide would be auto=false, if we want it to continue the slide show we would have to override the default with a auto=true via URL and capture it..

    ...i think...
    i found something very simple here...(for some reason it doesnt work in firefox - only works in IE...grrrrrrr)
    Code:
    <html>
    <head>
    <script language="javascript">
    <!--
    var count = 0;
    var running = true;
    
    function doRewrite() {
       if (running) {
          count++;
    
          div1.innerHTML='timer itself has timeout for the <b>' + count + '</b><sup>th</sup> 
    
    time.';
    
          status='Timer has run for ' + count + ' time(s)';
    
          setTimeout("doRewrite()", 1000);
       }
    }
    
    function StopStartTimer() {
       if (running) {
          running=false;
          status='Timer stopped';
          link1.innerText='Start Timer';
       }
       else {
          running=true;
          status='Timer started';
          link1.innerText='Stop Timer';
          setTimeout("doRewrite()", 1000);
       }
    }
    // -->
    </script>
    </head>
    <body onload="setTimeout('doRewrite()', 1000)">
    
    <!-- Placeholder for dynamic text -->
    <div id="div1">
    &nbsp;
    </div>
    
    <p><!-- Hyperlink to stop/start the timer -->
    <a href="javascript:void(0)" name=link1 onclick='StopStartTimer()'>Stop Timer</a>
    
    </body>
    </html>
    ...that could probably get modified so that it would start and stop the advancement without too much pain - but what do i know...I suck with the javascripts...

    any thoughts on how to accomplish this? or how to make it cross-browser functional?

    ROCK ON!!


    dan

  17. #17
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan, sorry I haven't replied yet. You posted some great ideas again. I experimented with a version 2 of the gallery. See what you think

    Your post made me realize that we don't need to reload the page at all - just change the src of the images. This made implementing auto-slide easier.

    Version 2 has some really ugly code right now. But I'll be cleaning it up. The next step is to turn it into an 'object' - then the next step will be to integrate it with a server-side script so it works even when js is disabled

  18. #18
    SitePoint Member
    Join Date
    Oct 2003
    Location
    West Chester, PA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster
    Hi Dan, sorry I haven't replied yet. You posted some great ideas again. I experimented with a version 2 of the gallery. See what you think

    Your post made me realize that we don't need to reload the page at all - just change the src of the images. This made implementing auto-slide easier.

    Version 2 has some really ugly code right now. But I'll be cleaning it up. The next step is to turn it into an 'object' - then the next step will be to integrate it with a server-side script so it works even when js is disabled

    hey no worries

    I dunno if i ll have much use for a server side version - i was on a search for a javascript on becasue hte host that this particular gallery is going on doesnt support ANY serversides at all other wise i would have done it in php

    anyway

    thats a pretty cool mechanism - i was actually kinda hoping to see if it could be done through passing it into URLs so that you could send a link to someone for a specific image...but you may be right, this might be a better way to do it...(would it be that much harder to pass the advancement to the URL than straight to the image? just curious...i ll play around a little)

    again you have outdone yourself rock on

  19. #19
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    The url arguments still work, just as in version 1, for example:

    Slideshow page, slide #26:
    http://cross-browser.com/toys/img_gallery_2.php?s=26

    Gallery page, start at #21:
    http://cross-browser.com/toys/img_gallery_2.php?g=21

  20. #20
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found your script trough google and it's accactely doing what i whas looking for

    However some questions raised....;
    - How do you tell the script howmany pictures to show in total (your example shows 60 but i can not find where you point to it)?
    - Do you have expierience in using it in e107?

    Thanx al lot

    (sorry for my english; it's not my first language)

  21. #21
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi jeronimo, Welcome to the forums!

    Glad you like my little toy

    Are you looking at version 2?

    I just uploaded a few small changes. The code is really ugly right now - I'm hoping to get a chance to clean it up (and do an OO redesign) soon.

    I added a comment to denote which variables are user configurable:
    Code:
    // user configurable:
    var imgsPerPg = 20;
    var imgsMax = 50;
    var tnWidth = 70, tnHeight = 70; // thumbnail size
    var tnSuffix = '_tn';
    var imgExt = '.jpg';
    var imgPath = 'images/'; // include trailing slash
    var slideTimeout = 3; // seconds before loading the next slide
    Also, there needs to be the same number of IMG elements as 'imgsPerPage'.

    Sorry, this is the first time I've ever heared of e107. It's a CMS, is that right?

    Vic also has a great slideshow script. I think he'll be posting a link soon. The more the merrier!

  22. #22
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well first of all; e107 is something like phpnuke. A pre maid php website with a lot of plugins ( www.e107.org ; www.e107coders.org )

    So if i am right;
    var imgsPerPg = 20; means 20 pictures on one page
    var imgsMax = 50; means max 50 pictures to show

    var imgPath = 'images/'; // inc... is the place where the pictures are hosted. This is relative to the page with the script?
    So in your example....
    www.mysite.com/scriptpage.php
    and images
    www.mysite.com/images/ the dir of the photo's

    I will try some thing tonight and will let you now my results

  23. #23
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! Let us know how it goes.
    btw...
    I was surprised that Google had already spidered that page. Out of curiosity I googled javascript image gallery. Of course, there are many of them And it has already indexed this thread as well.

  24. #24
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I will try to make a plugin for my site.

    From the contral pannel of my site I will put text in the data base is well as the place where the pictures are stored and the number of pictures to show.

    The php page then reads the information stored in the database and the result should be that te page contains the text with the thums underneath.

    A thing that I would like to add to the script is an option to load the picture fullsize in a new window (600*800 or something).

    So then the scripts looks like

    thumb --click thumb -> bigger image -- click bigger image -> new window big image

    Thing is that the picture should be 3 times on the server or the big image must be resizable in the 2nd action.

    Things will take a wile from now on; I am not so known with PHP at the moment

  25. #25
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just an update. I added support for captions


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
  •