Page 3 of 4 FirstFirst 1234 LastLast
Results 21 to 30 of 32

Thread: Newbie, want to learn how to make a photo gallery

  1. #21
    Join Date
    Dec 2012
    Location
    Cape Cod
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Today, I am trying to substitute my images, I usually do it like this, images/whatever.jpg
    I put my images into a folder.
    Im trying to use this way instead of going to a web site like the real-estate and examples do.
    Is this possible?
    Here is a screenshot of what I would love to do. If its possible,,,,,,,,
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	folder-not-site.jpg 
Views:	56 
Size:	97.7 KB 
ID:	4868  

  2. #22
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,963
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    Presumably when you say 'go to a website' you mean using an absolute path in your img src?

    You can specify an img src using an absolute path - that will look like "http://www.mywebsite.com/path/to/img.jpg" or "/path/to/img.jpg" (the / at the beginning means 'from the root'), OR you can us a relative path - which looks like "path/to/img.jpg" (no / at the beginning)

    Regardless of how you specify your image paths, the images will need to be uploaded to the internet to make them visible online, so you will always 'go to a website' to see them (the text terminology used in your illustration is a bit confusing).

    In your sample image you have an arrow pointing to the alt="" attribute - I'm not sure if this is a mistake (did you mean to point to the src="" instead?) or are you asking if alt="" somehow impacts on the way the image location is interpreted? That's not really clear from your question/illustration.
    Last edited by Beverleyh; 12-26-2012 at 02:59 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #23
    Join Date
    Dec 2012
    Location
    Cape Cod
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Its difficult for me to describe this, but my other sites always have links to my pictures as images/whatever.jpg.
    Here is how I do it with my sites, see screenshot.
    I think by the screen shot here that the previous way I did my images by having an image folder in the same directory as the html and css, that it always worked.
    When I used a site that made a link the way they do on your example sites here, I put an actual link in such as http://apod.nasa.gov/apod/astropix.html.

    Im a beginner pretty much at this, and I really appreciate your patience with me and the instructions,,,,,,,,,
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	images-folder.jpg 
Views:	55 
Size:	44.6 KB 
ID:	4869  

  4. #24
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,963
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    Ok - so its just this part then, using the relative path approach;
    Quote Originally Posted by Beverleyh View Post
    You can specify an img src using an absolute path - that will look like "http://www.mywebsite.com/path/to/img.jpg" or "/path/to/img.jpg" (the / at the beginning means 'from the root'), OR you can us a relative path - which looks like "path/to/img.jpg" (no / at the beginning)
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #25
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    As long as the photos you want to use are in that directory then you can use that type of link to them.So that is the big question for you.

    Are they there in that same directory? If they are not can you put them there or have someone put them there?
    Thanks,

    Bud

  6. #26
    Join Date
    Dec 2012
    Location
    Cape Cod
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes, all my photos are in the same directory, Ive never done it another way unless I want to link to something else entirely, like a NASA site or something.

    I did try to work with this one you gave me, its the best yet, but there is no mouseover option with it. But thats OK, I just want to get the gallery working.

    It is all distorted in Opera and Firefox, I need to put in pixel size for the photos for that, but is OK with Chrome and Safari, though I dont get the forward or back options yet,
    But its a start, and I am thrilled that I have gotten this far. (Pictures not great, iPhone on cloudy day, and our dogs move so fast.)

    Here it is so far.
    http://www.jcdouglass.net/gallery/this.html

    Thank you all! Its much more fun now that Ive finally accomplished something.

  7. #27
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    I used that script because you wanted that one.It requires you to click on the image.I will see if I can do something but I am not a javascript guru-lol

    yep,yep,Vic may be able to offer assistance to get this to work with a mouseover instead of clicking it-I looked at the script but have no idea how to make the changes for you.
    Last edited by ajfmrf; 12-27-2012 at 02:11 AM. Reason: to add a note
    Thanks,

    Bud

  8. #28
    Join Date
    Dec 2012
    Location
    Cape Cod
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is a wonderful script!
    I will practise with adding more of my pictures, as this one does work just like I want.
    Then later I can add some text, a background image, and see if when I put the px size in for the pictures, if it will work better in Firefox.

    Its incredible what I have learned so far from you people here!

    I will work on Vic's script page later on, as the way of adding my pictures is different, as there are 2 links for each picture, I put in another screen shot, so you can see what I am going to try today.
    Like I said before, I sure appreciate your instruction here!
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	two-links-one-picture.jpg 
Views:	59 
Size:	80.7 KB 
ID:	4871  

  9. #29
    Join Date
    Dec 2012
    Location
    Cape Cod
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Im working on another one, and making some progress, little trouble with my css, but looking better all the time.
    Will put it up here this afternoon once I get it looking OK for Safari, the page jumps a bit between the 2 links. And a few more issues.
    http://www.jcdouglass.net/gallery/gallery.html
    Better,,,,,,,,,

  10. #30
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .gallery {
      width:300px;border:solid red 1px;
    }
    
    .gallery IMG{
      width:150px;float:left;
    }
    
    
    #mseDIV{
     position:absolute;overflow:hidden;left:400px;top:300px;width:280px;height:373px;border:solid red 1px;
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
     <div id="mseDIV" style="" >
     </div>
     <div id="gal1" class="gallery" >
    <img src="http://www.jcdouglass.net/gallery/IMG_6464.jpg" alt="img" title="Image 1"/>
    <img src="http://www.jcdouglass.net/gallery/IMG_6467.jpg" alt="img" title="Image 2" />
    <img src="http://www.jcdouglass.net/gallery/IMG_6469.jpg" alt="img" title="Image 3" />
    <img src="http://www.jcdouglass.net/gallery/IMG_6473.jpg" alt="img" title="Image 4" />
    <img src="http://www.jcdouglass.net/gallery/IMG_6476.jpg" alt="img" title="Image 5"/>
    <img src="http://www.jcdouglass.net/gallery/IMG_6478.jpg" alt="img" title="Image 6" />
    <img src="http://www.jcdouglass.net/gallery/IMG_6485.jpg" alt="img" title="Image 7" />
    <img src="http://www.jcdouglass.net/gallery/IMG_6487.jpg" alt="img" title="Image 8" />
    <img src="http://www.jcdouglass.net/gallery/IMG_6490.jpg" alt="img" title="Image 9"/>
    <img src="http://www.jcdouglass.net/gallery/IMG_6493.jpg" alt="img" title="Image 10" />
    
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcMouseFade={
    
     init:function(o){
      var id=o.MouseOverID,ms=o.AnimateDuration,g=document.getElementById(o.GalleryID),d=document.getElementById(id),imgs=g.getElementsByTagName('IMG'),img=document.createElement('IMG'),ary=[],o,z0=0;
      img.style.position='absolute';
      img.style.visibility='hidden';
      img.style.width=d.offsetWidth+'px';
      img.style.height=d.offsetHeight+'px';
      for (;z0<imgs.length;z0++){
       img=img.cloneNode(false);
       img.src=imgs[z0].src;
       d.appendChild(img);
       ary[z0]=[img,0];
       this.addevt(imgs[z0],'mouseover','mse',id,z0,true);
       this.addevt(imgs[z0],'mouseout','mse',id,z0,false);
      }
      img=img.cloneNode(false);
      img.style.position='absolute';
      img.style.visibility='hidden';
      img.style.width=d.offsetWidth+'px';
      img.style.height=d.offsetHeight+'px';
      img.style.zIndex='101';
      d.appendChild(img);
      o=zxcMouseFade['zxc'+id]={
       ary:ary,
       ms:typeof(ms)=='number'?ms:1000,
       lst:ary[0]
      }
     },
    
     mse:function(id,nu,ud){
      var o=zxcMouseFade['zxc'+id],t;
      if (o&&o.ary[nu]){
       o.lst[0].style.zIndex='0';
       clearTimeout(o.lst[2]);
       this.animate(o,o.lst,o.lst[1],0,new Date(),o.ms*Math.abs((0-o.ary[nu][1])/100)+10);
       o.ary[nu][0].style.visibility='visible';
       clearTimeout(o.ary[nu][2]);
       t=ud?100:0;
       o.ary[nu][0].style.zIndex='2';
       this.animate(o,o.ary[nu],o.ary[nu][1],t,new Date(),o.ms*Math.abs((t-o.ary[nu][1])/100)+10);
       o.lst=o.ary[nu];
      }
     },
    
     animate:function(o,ary,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       ary[1]=now;
       oop.opc(ary[0],now);
      }
      if (ms<mS){
       ary[2]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
      }
      else {
       ary[1]=t;
       oop.opc(ary[0],t);
       if (t==0){
        ary[0].style.visibility='hidden';
       }
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     addevt:function(o,t,f,p,p1,p2){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
      }
     }
    
    
    }
    
    zxcMouseFade.init({
     MouseOverID:'mseDIV',
     GalleryID:'gal1',
     AnimateDuration:1000  //(optional) the animation speed in milli seconds.                        (number, default = no  animation)
    });
    
    zxcMouseFade.mse('mseDIV',0,true)
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Newbie trying to make my layout work!!
    By valeria in forum CSS
    Replies: 1
    Last Post: 12-03-2010, 02:46 AM
  2. How to learn to make Java Applets
    By Rockonmetal in forum Java
    Replies: 3
    Last Post: 08-24-2007, 08:55 PM
  3. A Place For Newbie To Learn
    By ArahMan7 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-13-2007, 03:56 AM
  4. Replies: 2
    Last Post: 05-04-2007, 03:30 AM
  5. Replies: 20
    Last Post: 09-18-2006, 11:30 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
  •