SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    can you guide me through making this gallery please?

    i am making a gallery page (not site) and would like the following output:

    1. thumbnails in a scrolling div (horizontal)
    2. clicking on thumbnails brings up a larger image on the same page, below the thumbnails.
    3. images are accompanied with a caption.
    4. div does not return to first thumbnail after every click.
    5. quick loading time.

    i think i can do this using some javascript and PHP? but i dont know how. im very new to scripting. i have seen other threads on this, and i dont want to spam by posting about the same topic, but they're site specific and the people discussing the code understand eachother coz they're experienced. and i have know idea what they're saying and im getting dizzy trying to extract the right information since i dont know what im looking for. i was hoping i could get some help with this one too.

    i have not uploaded the page yet, but could someone guide me through this? im not asking for anyone to do this FOR me as i would like to learn how to do it myself. so i guess im looking for more of a tutor. PM me please or post here. where do i start? how do i start?

    im very grateful for any help.

  2. #2
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Chicago
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would load Gallery2 and modify the code.

    http://gallery.menalto.com/

  3. #3
    Non-Member I87's Avatar
    Join Date
    Mar 2006
    Location
    UK
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe you should post this thread in the want to hire section


    http://www.sitepoint.com/forums/forumdisplay.php?f=220

  4. #4
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its a very simple page, with about 16 photos... is there anybody willing to help me out with this?

  5. #5
    Non-Member I87's Avatar
    Join Date
    Mar 2006
    Location
    UK
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by I87
    maybe you should post this thread in the want to hire section


    http://www.sitepoint.com/forums/forumdisplay.php?f=220
    here.

  6. #6
    Non-Member I87's Avatar
    Join Date
    Mar 2006
    Location
    UK
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wait nvm
    I didnt read your post properly
    sorry it's alittle late here :P heh

    but it can all be done in HTML and javascript
    let me read your post again and I'll come up with something

  7. #7
    Non-Member I87's Avatar
    Join Date
    Mar 2006
    Location
    UK
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    almost finished :P

  8. #8
    Non-Member I87's Avatar
    Join Date
    Mar 2006
    Location
    UK
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <?php
    $pic_arr 
    = array(
    'picture one','picture two','picture three','picture four'
    );
    $cap = array(
    'caption one','caption two','caption three','caption four'
    );

    ?>
    <script type="text/javascript">
    function ChangeImg(iSrc, iCaption)
    {
    document.getElementById("picture").src=iSrc;
    document.getElementById("caption").innerHTML=iCaption+"<br>";
    }
    </script>
    <img src="" id="picture" alt="Picture Here"><br /><div id="caption"></div>
    <form name="images">
    <?php 
    $i 
    = -1;
    foreach(
    $pic_arr as $pic){
    $i++;
    ?>
    <a href="javascript:ChangeImg('<?php echo $pic?>','<?php echo $cap[$i]; ?>')"><img src="<?php echo $pic?>" width="50" height="50" /></a><?php ?></form>

    okay, to add a picture & caption

    'picture one','picture two','picture three','picture four'
    obv you can take all of them off, but to add a picture you put the pictures name/extention..
    eg: 1.jpg

    then you put , after it if it's not the last image

    but you must put a caption, even if it's nothing it has to be there to build the array up

    it's the same thing as the picture URl, but in the

    'caption one','caption two','caption three','caption four'

    section


    this is just the basic script, and I will put a working example on my server in a second, you can work and improve this
    and maybe people can post improvements in this thread? heh :P

  9. #9
    Non-Member I87's Avatar
    Join Date
    Mar 2006
    Location
    UK
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <?php
    $pic_arr 
    = array(
    'img/pic_one.jpg','img/pic_two.jpg','img/pic_three.jpg','img/pic_four.jpg'
    );
    $cap = array(
    'hills. heh :P','sunset lol','flowwers','Idk what you call that, lol'
    );

    ?>
    <script type="text/javascript">
    function ChangeImg(iSrc, iCaption)
    {
    document.getElementById("picture").src=iSrc;
    document.getElementById("caption").innerHTML=iCaption+"<br>";
    }
    </script>
    <img src="" id="picture" alt="Picture Here"><br /><div id="caption"></div>
    <form name="images">
    <?php 
    $i 
    = -1;
    foreach(
    $pic_arr as $pic){
    $i++;
    ?>
    <a href="javascript:ChangeImg('<?php echo $pic?>','<?php echo $cap[$i]; ?>')"><img alt="<?php echo $pic?>" src="<?php echo $pic?>" width="50" height="50" /></a><?php ?></form>
    is the exact code for this
    http://www.pwnmyface.com/test.php

  10. #10
    Non-Member I87's Avatar
    Join Date
    Mar 2006
    Location
    UK
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or if you want the image before a thumb nail is clicked here


    PHP Code:
    <?php
    $pic_arr 
    = array(
    'img/pic_one.jpg','img/pic_two.jpg','img/pic_three.jpg','img/pic_four.jpg'
    );
    $cap = array(
    'hills. heh :P','sunset lol','flowwers','Idk what you call that, lol'
    );

    ?>
    <script type="text/javascript">
    function ChangeImg(iSrc, iCaption)
    {
    document.getElementById("picture").src=iSrc;
    document.getElementById("caption").innerHTML=iCaption+"<br>";
    }
    </script>
    <img src="<?php echo $pic_arr[0]; ?>" id="picture" alt="Picture Here"><br /><div id="caption"></div>
    <form name="images">
    <?php 
    $i 
    = -1;
    foreach(
    $pic_arr as $pic){
    $i++;
    ?>
    <a href="javascript:ChangeImg('<?php echo $pic?>','<?php echo $cap[$i]; ?>')"><img alt="<?php echo $pic?>" src="<?php echo $pic?>" width="50" height="50" /></a><?php ?></form>
    example here
    http://www.pwnmyface.com/test2.php

  11. #11
    Non-Member I87's Avatar
    Join Date
    Mar 2006
    Location
    UK
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heh hope I helped :P

  12. #12
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you 187! im looking at the code now to try and understand it. i'll try it out with my page and take it from there. maybe you'll hear again from me tomorrow? hehe... i wanna know how this script works. oh, where does the PHP script go? is that a seperate page? i know where to put the javascript in the HTML, but im clueless when i comes to PHP. thank you again!

  13. #13
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello 187, i have been trying to use this script in vain... i cant seem to get it to work. to show you what im working on, i have uploaded the unfinished page to http://samplegallery.awardspace.com/GalleryMain.htm --none of the links other than the thumbs work, this is so far a single page. where do i put the PHP script in the markup? and how do i make it work? i want the images to be centered and only download the images when clicked on, as opposed to downloading all the files and using javascript to hide/display each depending on the thumbnail clicked.

    hope you can help me out here again

  14. #14
    Non-Member I87's Avatar
    Join Date
    Mar 2006
    Location
    UK
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey, you have to save the extention as php, not htm
    If you want, later on I can write a fully javascript gallery
    right now I'm too tired to, but I will later

  15. #15
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh... i see. well, as i said: newbie here! hehe. if i save the page as php, what about the styling? will that still be there? and will the links still work etc?

    um, i dont want you to do it all. thats not really fair to ask you. just set me on the right path, which you have done, but i dont know where im going. lol! could you give me some instructions on what to do first before we start with the gallery? save the page as .php? that would be first right? then i guess we'll just take it from there.

    thanks so much, i really appreciate the help.

    EDIT: the page is now save with the extension .php, all the styling is still there dont need to answer that question then.. so i guess the next step would be the coding. i tried the code again, didnt work for me. i'll just wait for your reply. thanks again 187!

  16. #16
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello 187, i have the page uploaded now with all the thumbnails of the pics (but the high resolution pics have not yet been uploaded). i've decided to go with an open window approach. what i'd like... is this:

    1. when you click on a thumbnail, a new window will appear (height: 610px, width: 550px) showing the enlarged photo.
    2. the position of the new window will be at the center of the screen.
    3. the new window will also have a set of thumbnails at the top in a horizontally scrolling div or ideally, with an arrow button on the left to scroll left and the same for the right. (no button for "next photo" or "last photo")
    4. each photo will be accompanied by a caption which will show above the photo under the thumbnails.
    5. clicking on the thumbnails in the new open window will display the enlarged photo with its caption.
    6. if the photo is wider than the window, a scrolling bar will appear and scrolls only the photo, not the whole page.
    7. a "close window" button will be at the bottom.

    http://samplegallery.awardspace.com/GalleryMain.php

    i know how to open a new window with javascript, specifying the size etc. but i still dont understand how to do the photo thing where you call up the right photo and caption. i also dont know how to get the right image to appear in the new window depending on which thumbnail is clicked first.

    all this scripting is so confusing to me. and it doesnt work when i try it. but your sample galleries work just fine.


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
  •