24 Replies Latest reply: Jun 9, 2015 11:01 AM by Nancy O. RSS

    Gallery created with ul in fluid grid layout

    LarkinAngel

      I'm trying to create a gallery of images (all the same size) using Dreamweaver 6 and the fluid grid system. I'd like the images to size up and down with the browser window size as well as to go from 1 across in mobile size, and up to 4 across depending on the size of the window, all while mantaining even padding. 

       

      I have a div directly inside the .gridContainer clearfix div, but I can't get the images within to re-size. Is this because all fluid divs have to be directly in the .gridContainer clearfix? If so, is there a way around this?

        • 2. Re: Gallery created with ul in fluid grid layout
          Nancy O. MVP

          I have a div directly inside the .gridContainer clearfix div, but I can't get the images within to re-size.

          Remove the height and width attributes from your <img> HTML code.   Then the images should be able to re-scale to device width.  If they don't, you'll need to post the URL to your test page so we can see what else may be going on.

           

           

          Nancy O.

          • 3. Re: Gallery created with ul in fluid grid layout
            LarkinAngel Community Member

            I didn't have any height and width attributes, but that got me thinking about the actual size of the images. They were 240px x 160px 300dpi. I just changed the size to 480 x 320 300dpi and they will scale down when I pull the window size in (past tablet size towards mobile), but only once they go to 1 column. At tablet size and above they display as full size images, regardless of browser window size. In a 1000 wide window I want 4 columns wide, and then as the window scales down, size the image until they reach a min width, then go to 3 columns until a min width, then go to 2 columns, etc...

             

            Possible?

            • 4. Re: Gallery created with ul in fluid grid layout
              Nancy O. MVP

              As an example, this FluidGrid test page uses photos that are optimized for the web at 72dpi, 900 x 675px.   When the page layout allows it, the images scale up to a max width of 900px (native image size).  Each Photo is in its own division.

              http://alt-web.com/FluidGrid/Fluid2.html

               

              For better answers to layout questions, we must see a live link.  Anything less is just guesswork.

               

               

              Nancy O.

              • 5. Re: Gallery created with ul in fluid grid layout
                LarkinAngel Community Member

                I created my gallery using ul and li--see link below

                 

                http://www.kathleenphelpsdesign.com/hidden.html

                • 6. Re: Gallery created with ul in fluid grid layout
                  Nancy O. MVP

                  Something's messed up. Lists inside <div class="border"> are not re-sizing down enough to fit inside mobile layouts.  If I replace the the HTML lists/images with plain text, it re-sizes as expected.

                   

                  I removed the #gallery styles from second-try.css and the images re-sized as expected.  So your culprit is narrowed down to the #gallery css code.

                   

                  Incidentally, I advise people to never tamper with the Boilerplate.css or FluidGrid.css code.  It's much safer to put your content styles into a separate external stylesheet. 

                   

                   

                   

                  Nancy O.

                  • 7. Re: Gallery created with ul in fluid grid layout
                    LarkinAngel Community Member

                    I've tried to replicate whatever you saw, removing #gallery styles from second_try, but saw no difference in the way the images sized. Then I went back to my html and took out  "border" and re-activated #gallery styles and nothing changed except I lost my border.

                     

                    I've had some time to think about this since I last posted, would it make more sense if I created the gallery effect I'm after with each image in their own div directly in .gridContainer? Then I could specify clearly that there would be 4 columns of images on the max screen, 3 on the tablet, 1 on the mobile...

                     

                    By the way, never messed with the Boilerplate or FluidGrid css...that is one thing I do remember from the load of material I've tried digesting in the last week :-)

                     

                    Thanks for the help!

                    • 8. Re: Gallery created with ul in fluid grid layout
                      Nancy O. MVP

                      Second-try.css = your FluidGrid.css  I'm suggesting that you keep whatever you care to name your layout.css file separate from your content styles. 

                       

                      As far as putting images into their own divs, I don't think that's necessary.  Heck, you don't really even need lists or paragrphs for this.  Just insert images into the .border div and allow them to adjust to however many lines they require.

                       

                      EXAMPLE. http://alt-web.com/FluidGrid/Fluid3.html

                      My images are quite a bit smaller than yours, but you get the idea.

                       

                       

                      Nancy O.

                      • 9. Re: Gallery created with ul in fluid grid layout
                        LarkinAngel Community Member

                        oops

                         

                        Just when I thought I was getting somewhere with my understanding of css, I cross Dreamweaver the wrong way. I'll try rebuilding, the right way. Thank you for contributing to my education.

                        • 10. Re: Gallery created with ul in fluid grid layout
                          doriang59711329

                          Nancy O. wrote:

                           

                          Second-try.css = your FluidGrid.css  I'm suggesting that you keep whatever you care to name your layout.css file separate from your content styles.

                           

                          As far as putting images into their own divs, I don't think that's necessary.  Heck, you don't really even need lists or paragrphs for this.  Just insert images into the .border div and allow them to adjust to however many lines they require.

                           

                          EXAMPLE. http://alt-web.com/FluidGrid/Fluid3.html

                          My images are quite a bit smaller than yours, but you get the idea.

                           

                           

                          Nancy O.

                           

                          Nancy,

                          I have to ask because this is giving me a headache.

                          Since I don't have Fireworks to create a gallery with Dw  I downloaded a photo gallery generator from the web cuz I have over 100 images.  I got the photo gallery created and I went to copy-paste the HTML into a new div but my gallery is fixed, images won't budge like yours.  What am I doing wrong please?

                          • 11. Re: Gallery created with ul in fluid grid layout
                            Nancy O. MVP

                            That's the price you pay for using a widget to create galleries over coding your own.  Answers are in your gallery's code.  Keep in mind that it may not be possible to do what you want since many widgets use JavaScript and tables to generate galleries.

                             

                            In this example, I populated my CSS page dynamically with PHP code.  Images reside in designated folders on the server.  This saves a lot of time.  Images can be removed or replaced with new ones and the page automatically updates itself.

                            Alt-Web :: PHP & Fancybox Photo Gallery

                             

                             

                            Nancy O.

                            • 12. Re: Gallery created with ul in fluid grid layout
                              doriang59711329 Community Member

                              ohhh that's exactly the look i'm looking for!   I got work to do, thank you as always!

                              • 13. Re: Gallery created with ul in fluid grid layout
                                doriang59711329 Community Member

                                Capture.JPG

                                 

                                This is at bottom of your gallery - Do I insert both PHP and CSS  inside the div of my choice? 

                                • 14. Re: Gallery created with ul in fluid grid layout
                                  Nancy O. MVP

                                  PHP code goes inside your <body> tag where you want the gallery to appear.  You must name your page with a .php file extension.

                                   

                                  CSS code goes into your style sheet.

                                  NOTE: if you're using Fluid Grids, use a separate external style sheet other than the one FGLayouts created for you.

                                   

                                  To test PHP pages locally, you'll need to install and set-up a local testing server.

                                  Setting up a PHP environment in Dreamweaver

                                  http://www.adobe.com/devnet/dreamweaver/articles/setup_php.html

                                   

                                   

                                  Nancy O.

                                  • 15. Re: Gallery created with ul in fluid grid layout
                                    doriang59711329 Community Member

                                    I will install and setup the testing server. Thank you.

                                    As for creating a separate external style sheet, do you mean from my FGLayout menu?  sorry i'm confused.

                                     

                                    Capture.JPG

                                    • 16. Re: Gallery created with ul in fluid grid layout
                                      Nancy O. MVP

                                      To create a new style sheet, go to File > New > blank page > CSS file.  Hit Create button.

                                      Now add your CSS code.  Save & name (whatever.css).

                                       

                                      Open your HTML document in code view.  Drag the newly created .css file from your files panel into your <head> tag underneath the links to boilerplate.css and FGLayout.css (whatever you named it).

                                       

                                      <link href="boilerplate.css" rel="stylesheet" type="text/css">

                                      <!--Responsive layout-->

                                      <link href="FluidLayout.css" rel="stylesheet" type="text/css">

                                      <!--My custom content styles-->

                                      <link href="custom.css" rel="stylesheet" type="text/css" media="screen">

                                       

                                       

                                      Nancy O.

                                      • 17. Re: Gallery created with ul in fluid grid layout
                                        doriang59711329 Community Member

                                        Nancy

                                        Ive done all this and still having issues recreating the photo gallery.  I linked the fluid.html page to the .css file where i pasted your css code.. 

                                        What else do i need to check?  do I need to link the php file to my fluid.html page?  something is not connecting.

                                        You mentioned I have to paste the php code in my php file where i want my gallery to go, but don't i determine that in my fluid.html within a div?

                                        I apologize for my confusion.

                                        • 18. Re: Gallery created with ul in fluid grid layout
                                          Nancy O. MVP

                                          PHP scripts will not work in ordinary .html files.  Open your .html and SaveAs .php.  Also, you'll need to test on a server -- either your remote or a local testing server like wamp, xampp or mamp.

                                           

                                           

                                          Nancy O.

                                          • 19. Re: Gallery created with ul in fluid grid layout
                                            doriang59711329 Community Member

                                            I can see the gallery but not the thumbnails, but if I click on the thumbnails I can see the big images..

                                            my thumbs are in folder phpjune

                                            my big images are in folder phpjune2

                                            Can you please check below if I missed something?  thanks so much.

                                             

                                            <body>

                                            <div class="gridContainer clearfix">
                                              <div id="LayoutDiv1">

                                            <?php
                                            $directory = '/xampp/htdocs/phpjune'; //path to thumbnails
                                            $link = '/xampp/htdocs/phpjune2'; //path to full-sized images
                                            $allowed_types = array('jpg','jpeg','gif','png');
                                            $aFiles = array();
                                            $dir_handle = @opendir($directory) or die("There is an error with your image directory!");
                                            while ($file = readdir($dir_handle)) //traverse through directory
                                            {
                                            if($file=='.' || $file == '..') continue; //skip links to parent directories
                                            $file_parts = explode('.',$file); //split file parts and put each into an array
                                            $ext = strtolower(array_pop($file_parts)); //last part is extension
                                            $title = implode('.',$file_parts); //what's left is filename
                                            $title = htmlspecialchars($title); //make the filename html-safe
                                            if(in_array($ext,$allowed_types))
                                            {
                                            $aFiles[] = $file;
                                            }
                                            }
                                            closedir($dir_handle); //close directory
                                            natsort($aFiles); // natural sort filenames
                                            $aFiles = array_reverse($aFiles); //display in reverse order
                                            $i=0; //loop
                                            foreach ($aFiles as $file) { //repeat as before
                                            $file_parts = explode('.',$file);
                                            $ext = strtolower(array_pop($file_parts));
                                            $title = implode('.',$file_parts);
                                            $title = htmlspecialchars($title);
                                            $nomargin='';
                                            if(($i+1)%4==0) $nomargin='nomargin'; //last image on the row has class "nomargin"
                                            echo '
                                            <div class="fancybox thumbs '.$nomargin.'" style="background:url('.$directory.'/'.$file.') no-repeat 50% 50%">
                                            <a rel="group" href="http://localhost/phpjune/'.$file.'" title="'.$title.'">'.$title.'</a>
                                            </div>';
                                            $i++; //increment the image counter
                                            }
                                            ?>


                                            <hr class="clearing" />

                                            <?php

                                            $directory = "/xampp/htdocs/phpjune";
                                            if (glob($directory . "*.jpg") != false)
                                            {
                                            $filecount = count(glob($directory . "*.jpg"));
                                            echo $filecount;
                                            }
                                            else
                                            {
                                            echo 0;
                                            }
                                            ?></p> </div>

                                            • 20. Re: Gallery created with ul in fluid grid layout
                                              Nancy O. MVP

                                              Didn't you create a local site folder in XAMP?

                                              C:/xamp/htdocs/yourSite/

                                               

                                              Assuming you are working in a properly defined local site folder in DW,  that your .php page is in the site root and your images are in phpjune and phpjune2 respectively, the path should look like this:

                                               

                                              $directory = 'phpjune'; //path to thumbnails

                                              $link = 'phpjune2'; //path to full-sized images

                                               

                                              <a rel="group" href="phpjune/'.$file.'" title="'.$title.'">'.$title.'</a>

                                               

                                               

                                              Nancy O.

                                              • 21. Re: Gallery created with ul in fluid grid layout
                                                doriang59711329 Community Member

                                                Yes, I did create a local site folder in xampp. (phptest)

                                                my .php page is saved there and both my image folders are there too and the path looks like this;

                                                 

                                                $directory = '/xampp/htdocs/phptest/phpjune'; //path to thumbnails

                                                $link = '/xampp/htdocs/phptest/phpjune2'; //path to full-sized images

                                                .

                                                Not only are the thumbs not showing, the gallery is not even behaving the way yours does.  I'm sorry, I'm obviously not following how php works.

                                                 

                                                Is there a simpler way to create a fluid image gallery?  sigh

                                                • 22. Re: Gallery created with ul in fluid grid layout
                                                  Nancy O. MVP

                                                  If your site folder is phptest that is your localhost's site folder.

                                                  If phpjune and phpjune2 are not being recognized by your testing server, then either your testing server is not working correctly or your DW site definition is goofed up.

                                                   

                                                  Please confirm that xamp is running.

                                                   

                                                  See my DW screenshots. In my example, I'm using wamp server instead of xamp and www instead of htdocs.

                                                  CS6-testingServer1.jpg

                                                  Advanced tab:

                                                  CS6-testing-server-advanced.jpg

                                                  CS6-testingServerFinalScreen.jpg

                                                   

                                                  Nancy O.

                                                  • 23. Re: Gallery created with ul in fluid grid layout
                                                    doriang59711329 Community Member

                                                    Thank you.

                                                    Yes - all your screenshots confirm that my test server is setup correctly.  Xampp is running automatically. I followed all the steps.

                                                    But I still keep getting message that my site definition is incorrect - arrggg

                                                    • 24. Re: Gallery created with ul in fluid grid layout
                                                      Nancy O. MVP

                                                      If your site is defined properly, this is the path to your image folders -- no xamp, no htdocs, no site folder required:

                                                       

                                                      $directory = 'phpjune'; //path to thumbnails

                                                      $link = 'phpjune2'; //path to full-sized images


                                                      Can you upload your work to a remote server an post the URL?



                                                      Nancy O.