4 Replies Latest reply on Apr 21, 2012 7:52 AM by HTML-Impaired

    3 Website Questions:Easy for you, hard for me

    HTML-Impaired

      Hi there,

       

      I have a portfolio website: www. jessicawarrick.com. I know next to nothing about html, so designed my site off of a template in Dreamweaver 8, and got help from a friend.

       

      I have some things I'd like to do that are probably simple to you, but difficult for me:

       

      -I'd like the portfolio section to have an option to scroll through the images with arrows on the right and left, similar to facebook's photo viewing setup. This way, the user doesn't have to click close and open for each image. 

       

      -It sounds dumb, but I can't, for the life of me, figure out how to place images in the links section. The formatting doesn't seem to want to allow it. I just want to be able to insert one small picture to the right of the text, and one small picture to the left.

       

      -Lastly, I thought it would be easy to add portfolio images, and update current ones (thumbnails as well)... I have folders in my site called "portfolio" and "thumbnails." I tried to add a new image to #11 in both folders, but it is not showing up when I test the site on any browser, any device, any computer. So there has to be some code somewhere that needs to modified as well, that I am missing.


      Please let me know what you need from me so I can get some help. I guess I'd need to email my zipped website with all of the files to whoever wants to tackle my questions.

       

      Thanks so much in advance!

      -Jessica

        • 1. Re: 3 Website Questions:Easy for you, hard for me
          codeDawg

          Hi Jessica,

           

          Let's take 'em one at a time:

           

          I'd like the portfolio section to have an option to scroll through the images with arrows on the right and left, similar to facebook's photo viewing setup. This way, the user doesn't have to click close and open for each image.

          It looks like you are using FancyZoom for your portfolio.  I took a quick look at the features and I didn't see anything that would indicate that it can do the navigation you'd like to see.

          Might have to go with lightbox or some other slider in this area.  There are zillions of them around the web.

           

          It sounds dumb, but I can't, for the life of me, figure out how to place images in the links section. The formatting doesn't seem to want to allow it. I just want to be able to insert one small picture to the right of the text, and one small picture to the left.

           

          Not dumb at all.  Just takes a little experience, experimentation and determination.  Basically you want to add each image inside a <div>.  For the "small picture to the right", set that div to float:right.  For the "small picture to the left", set that div to float:left.

           

          Lastly, I thought it would be easy to add portfolio images, and update current ones (thumbnails as well)... I have folders in my site called "portfolio" and "thumbnails." I tried to add a new image to #11 in both folders, but it is not showing up when I test the site on any browser, any device, any computer. So there has to be some code somewhere that needs to modified as well, that I am missing.

           

          From what I can tell from peeking at your source code - it sounds like you have the right idea.

          To replace image #11:

          1. Take your new image and resize it to your thumbnail size.  (85px × 85px)
          2. Rename it to 0011small.jpg  (those 0s are numbers, not letters)
          3. Upload it to your images/Thumbnails folder.
          4. Take the new image and resize it to the "big" size.  (758px × 400px)
          5. Rename it to 0011.big.jpg
          6. Upload it to your images/portfolio folder. 
          7. View the portfolio in your browser (be sure to hit the refresh button).

           

          You may need a web designer for the first two changes you'd like to make.  Depends on how much effort you want to put into the project.

          It looks to me like you're "almost there" for the third change.  (Changing the images in your portfolio.)

           

          ~codeDawg

          • 2. Re: 3 Website Questions:Easy for you, hard for me
            Ken Binney Adobe Community Professional & MVP

            HTML-Impaired wrote:

             

            Hi there,

             

            I

            -I'd like the portfolio section to have an option to scroll through the images with arrows on the right and left,
            I recommend Fancybox

            I just want to be able to insert one small picture to the right of the text, and one small picture to the left.

            Apply a CSS style to Float your images

             

            -Lastly, I thought it would be easy to add portfolio images, and update current ones (thumbnails as well)... I have folders in my site called "portfolio" and "thumbnails." I tried to add a new image to #11 in both folders, but it is not showing up when I test the site on any browser, any device, any computer. So there has to be some code somewhere that needs to modified as well, that I am missing.

            Please post a link to the page you are testing

            • 3. Re: 3 Website Questions:Easy for you, hard for me
              Ben M Adobe Community Professional

              First, very nice site and artwork.  Ok, back to your questions:

               

              -I'd like the portfolio section to have an option to scroll through the images with arrows on the right and left, similar to facebook's photo viewing setup. This way, the user doesn't have to click close and open for each image.

               

              First thing I noticed is you are using a script called FancyZoom here.  I'm not overly familiar with it and went through the website.  From looking through their website it does not appear that this is possible through the documentation without re-writing the script to accommodate.  Personally I would normally recommend Fancybox ( http://fancyapps.com/fancybox/ ).  Not too hard to implement.  Would require some javascript includes and an update to your JQuery.js file which is currently at 1.3.2, current release is 1.7.2 and Fancybox needs 1.6/1.7 to run if I am not mistaken.  Your site would have to be examined a bit just to make sure the scrolling and some other effects still work, but I don't foresee any issues.

               

              -It sounds dumb, but I can't, for the life of me, figure out how to place images in the links section. The formatting doesn't seem to want to allow it. I just want to be able to insert one small picture to the right of the text, and one small picture to the left.

               

              This page may be difficult for someone to edit in DW without experience, because of how "Design View" renders the content.  The code you should be edting is:

               

              <!-- START LINKS PAGE -->

                          <a id="links-page"></a>

                        <div class="links">

                              <h1 class="style8"> Links</h1>

                              <p align="center" class="style33">Find me:</p>

                              <p align="center" class="style24"><span class="style37"><a href="http://jessicawarrickart.blogspot.com/" target="_blank" class="style1">My Blog</a> </span></p>

                              <p align="center" class="style38"><a href="https://twitter.com/Jessica_Warrick" target="_blank" class="style1">Twitter</a></p>

                              <p align="center" class="style38"><a href="http://www.facebook.com/pages/Jessica-Warrick/191128774308284" target="_blank" class="style1">Facebook</a></p>

                              <p align="center" class="style24"><span class="style37"><a href="http://www.facebook.com/JbearPro" target="_blank" class="style1">JBear Productions</a></span> </p>

                              <p class="style30"> </p>

                        </div>

              <div class="grid_4 omega contact-info">

                          <div align="center">

                                  <p class="style25"> </p>

                            <p align="left" class="style25"> </p>

                                </div>

                                <p class="style1"> </p>

                                <h3 align="center"> </h3>

                                 

                                  <address>

                                  </address>

                                 

                                  <p class="right"> </p>

                        </div>

                          <div class="links-bottom-bg"></div>

                          <!-- END LINKS PAGE -->

               

              Editing between the <p> tags should do the trick.  Just place your cursor after the > and before the </p> and clicking to insert and image will insert an image at that location.  Moving it around can be a bit more complicated. 

               

              -Lastly, I thought it would be easy to add portfolio images, and update current ones (thumbnails as well)... I have folders in my site called "portfolio" and "thumbnails." I tried to add a new image to #11 in both folders, but it is not showing up when I test the site on any browser, any device, any computer. So there has to be some code somewhere that needs to modified as well, that I am missing.

               

              Based on your response here it sounds like you would have been happier with a Content Management System to edit parts of the site and not having a static site like you have where you edit in DW.  Here's the problem you are going to run into with this design.  If you want to add more pictures you could add the "overflow:scroll;" property to the div container of the Portfolio.  But if anyone visits your site from a mobile device or tablet, the overflow usually doesn't work.  In this case you would probably be better off with multiple pages for the design.  I don't have any code that would solve your problem off the top of my head, but I could look into it and see what I can come up with. Again, a CMS would have really helped here, and without coding experience it wont' be easy to make these changes.

              • 4. Re: 3 Website Questions:Easy for you, hard for me
                HTML-Impaired Level 1

                Hi codeDawg, Ken and SnakEyez02,

                 

                Thanks for your response everyone!! You guys rock! I guess I'll just have to be happy with my portfolio setup as is, for now, then. I'll look into Fancybox in the near future and proabbly be right back here with more questions:) I will try my hand at the "<div>" and "float" techniques and see if I can get them to work. Thanks for the detailed insert image instructions, SnakEyez. And, I actually figured out what was wrong concerning the addition of new portfolio images/thumbs, I just didn't upload it correctly to my remote server. Thanks again for your help, I'll let you know how it turns out...

                -Jessica