20 Replies Latest reply: Nov 14, 2012 2:00 PM by Nancy O. RSS

    Lightbox 1.0

    TonyMancuso Community Member

      Hi everyone i have an issue when i upload my preset layout ive been working on on my pre webpage for a portfolio. i get a white image box with a question mark and the titles on the image its suppose to be, then when i click on the image, the big image appears as it should, but the codes behind the image does not work no after effects, as it suppose to in live view, it shows the same thing a big image white image when it pops up and a question mark and no effects. it opens up one image and it a white big image box that is empty??!

       

       

      is there a new version on lightbox im just not aware of for the reason of the issue?

       

      ps: because it works in live view with all the pretty codes and perfect details. then when i preview it in the browser it does what i have explain here, NOT WORK?

        • 1. Re: Lightbox 1.0
          Jon Fritz II MVP

          You may just need to clear your browser cache.

           

          It's also possible you have some bad or missing links.

           

          Hard to say without seeing the site though. Any chance you could post a link to a page online?

          • 2. Re: Lightbox 1.0
            TonyMancuso Community Member

            Yeah, I could, everytime I try to upload to my server. I can never get it working. May I copy and paste the code here?

             

            Sent from my HTC smartphone on the Now Network from Sprint!

            • 3. Re: Lightbox 1.0
              Jon Fritz II MVP

              Copy and pasting the code may not reveal the issue, sometimes it takes the page on a server to see where you are going wrong, but if it's the only alternative, you can give it a try.

               

              You have to be in the forum to post code though, you can't post it via email.

              • 4. Re: Lightbox 1.0
                TonyMancuso Community Member

                <!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">

                <head>

                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                <title>Untitled Document</title>

                <link href="Templatelayout/PortfolioStyle/container.css" rel="stylesheet" type="text/css" />

                <link href="Templatelayout/PortfolioStyle/banner.css" rel="stylesheet" type="text/css" />

                <link href="Templatelayout/PortfolioStyle/Div1.css" rel="stylesheet" type="text/css" />

                <link href="Templatelayout/PortfolioStyle/imageholders.css" rel="stylesheet" type="text/css" />

                <link href="Templatelayout/PortfolioStyle/Div3.css" rel="stylesheet" type="text/css" />

                <style type="text/css">

                body {

                          background-color: #000033;

                }

                </style>

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

                <link href="Pagestyles/PortfolioPageStyle/MenuBar.css" rel="stylesheet" type="text/css" />

                <link href="Templatelayout/PortfolioStyle/pages.css" rel="stylesheet" type="text/css" />

                <style type="text/css">

                a:link {

                          color: #FFFFFF;

                }

                a:hover {

                          color: #000000;

                }

                a:active {

                          color: #000000;

                }

                a:visited {

                          color: #0066FF;

                }

                a {

                          font-family: Georgia, "Times New Roman", Times, serif;

                }

                body,td,th {

                          font-family: "Myriad Pro";

                }

                </style>

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

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

                <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                <script src="scripts/jquery.js" type="text/javascript"></script>

                <script src="scripts/lightbox.js" type="text/javascript"></script>

                <style type="text/css">

                /* BeginOAWidget_Instance_2127022: #gallery */

                 

                 

                                    .lbGallery {

                                              /*gallery container settings*/

                                              background-color: #CCC;

                                              padding-left: 20px; 

                                              padding-top: 20px; 

                                              padding-right: 20px; 

                                              padding-bottom: 20px; 

                                              width: 800px;

                                              height: auto;

                                              text-align:center;

                                    }

                                    .lbGallery ul { list-style: none; margin:0;padding:0; }

                                    .lbGallery ul li { display: inline;margin:0;padding:0; }

                                    .lbGallery ul li a{text-decoration:none;}

                 

                                    .lbGallery ul li a img {

                                              /*border color, width and margin for the images*/

                                              border-color: #000000;

                                              border-left-width: 10px;

                                              border-top-width: 10px;

                                              border-right-width: 10px;

                                              border-bottom-width: 20px;

                                              margin-left:5px;

                                              margin-right:5px;

                                              margin-top:5px;

                                              margin-bottom:5px:

                                              }

                 

                                    .lbGallery ul li a:hover img {

                                              /*background color on hover*/

                                              border-color: #999999;

                                              border-left-width: 10px;

                                              border-top-width: 10px;

                                              border-right-width: 10px;

                                              border-bottom-width: 20px;

                                    }

                 

                                    #lightbox-container-image-box {

                                              border-top: 0px none #ffffff;

                                              border-right: 0px none #ffffff;

                                              border-bottom: 0px none #ffffff;

                                              border-left: 0px none #ffffff;

                                              }

                 

                                    #lightbox-container-image-data-box {

                                              border-top: 0px;

                                              border-right: 0px none #ffffff;

                                              border-bottom: 0px none #ffffff;

                                              border-left: 0px none #ffffff;

                                              }

                /* EndOAWidget_Instance_2127022 */

                </style>

                <link href="Pagestyles/PortfolioPageStyle/gallery.css" rel="stylesheet" type="text/css" />

                <script type="text/xml">

                <!--

                <oa:widgets>

                  <oa:widget wid="2127022" binding="#gallery" />

                </oa:widgets>

                -->

                </script>

                </head>

                 

                 

                <body>

                <div id="container">

                  <div id="banner"></div>

                  <div id="Div1">

                    <ul id="MenuBar" class="MenuBarHorizontal">

                      <li><a href="Home.html">Home</a>      </li>

                      <li><a href="About.html">About</a></li>

                      <li><a class="MenuBarItemSubmenu" href="Service.html">Service</a>

                        <ul>

                          <li><a href="#">Item 3.2</a></li>

                          <li><a href="#">Item 3.3</a></li>

                        </ul>

                      </li>

                      <li><a href="Contact.html">Contact</a></li>

                    </ul>

                  </div>

                  <div id="imageholders">

                    <div id="pages"><a href="portfolio1.html"> 1</a>,<a href="portfolio2.html">2</a>,<a href="portfolio3.html">3</a>,<a href="portfolio4.html">4</a></div>

                    <div id="gallery" class="lbGallery">

                      <ul>

                        <li> <a href="/images/lightboxdemo5.jpg" title=""><img src="/images/lightboxdemo_thumb5.jpg" width="72" height="72" alt="" /></a> </li>

                        <li> <a href="/images/lightboxdemo1.jpg" title=""><img src="/images/lightboxdemo_thumb1.jpg" width="72" height="72" alt="Flower" /></a> </li>

                        <li> <a href="/images/lightboxdemo2.jpg" title=""><img src="/images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="Tree" /></a> </li>

                        <li> <a href="/images/lightboxdemo3.jpg" title=""><img src="/images/lightboxdemo_thumb3.jpg" width="72" height="72" alt="" /></a></li>

                        <li> <a href="/images/lightboxdemo4.jpg" title=""><img src="/images/lightboxdemo_thumb4.jpg" width="72" height="72" alt="" /></a></li>

                        <li> <a href="/images/lightboxdemo5.jpg" title=""><img src="/images/lightboxdemo_thumb5.jpg" width="72" height="72" alt="" /></a></li>

                        <li> <a href="/images/lightboxdemo1.jpg" title=""><img src="/images/lightboxdemo_thumb1.jpg" width="72" height="72" alt="Flower" /></a></li>

                      </ul>

                    </div>

                    <script type="text/javascript">

                // BeginOAWidget_Instance_2127022: #gallery

                 

                 

                                    $(function(){

                                              $('#gallery a').lightBox({

                                                        imageLoading:                              '/images/lightbox/lightbox-ico-loading.gif',                    // (string) Path and the name of the loading icon

                                                        imageBtnPrev:                              '/images/lightbox/lightbox-btn-prev.gif',                              // (string) Path and the name of the prev button image

                                                        imageBtnNext:                              '/images/lightbox/lightbox-btn-next.gif',                              // (string) Path and the name of the next button image

                                                        imageBtnClose:                              '/images/lightbox/lightbox-btn-close.gif',                    // (string) Path and the name of the close btn

                                                        imageBlank:                                        '/images/lightbox/lightbox-blank.gif',                              // (string) Path and the name of a blank image (one pixel)

                                                        fixedNavigation:                    false,                    // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.

                                                        containerResizeSpeed:          400,                               // Specify the resize duration of container image. These number are miliseconds. 400 is default.

                                                        overlayBgColor:                     "#333333",                    // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.

                                                        overlayOpacity:                              .6,                    // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9

                                                        txtImage:                                        'Image',                                        //Default text of image

                                                        txtOf:                                                  'of'

                                              });

                                    });

                 

                // EndOAWidget_Instance_2127022

                    </script>

                  </div>

                  <div id="Div3"></div>

                </div>

                </div>

                </div>

                </div>

                <script type="text/javascript">

                var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                </script>

                </body>

                </html>

                • 5. Re: Lightbox 1.0
                  Jon Fritz II MVP

                  Other than a few extra </div> tags (three of them towards the end) I don't see any obvious errors that jump out at me.

                   

                  It looks like you have quite a few different locations where you are keeping scripts and css. You could have a directory or two goofed up there, but there is no way for us to verify without an actual uploaded page we can see the functioning links on.

                  • 6. Re: Lightbox 1.0
                    TonyMancuso Community Member

                    Oh ok I'll check that out soon . Thanks

                     

                    Sent from my HTC smartphone on the Now Network from Sprint!

                    • 7. Re: Lightbox 1.0
                      TonyMancuso Community Member

                      Ok I'm still confused. I think my issue reason it works in live preview not

                      an actual browser is because I'm not importing the gallery properly. Do you

                      have a tutorial I can read. Or maybe you can give a step by step tutorial,

                      on how to to use import it to your web page. Because I get stuck on the

                      "lightbox 1.0" when your configuring the ICONS and the INTERNATIOALIZATION

                      part. And all in all how to import it correctly

                      • 8. Re: Lightbox 1.0
                        TonyMancuso Community Member

                        can someone please help me with this issue im still confuse. i still keep trying to view the portfolio in my page in live view and it works. then when i preview in safari or google chrome the pictures do not show. it still has a blank image with a question same with the big image as it pops up. and the effects dont work.....

                        • 9. Re: Lightbox 1.0
                          Nancy O. MVP

                          Primer on using jQuery:

                          http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html

                           

                          Be sure to upload all plug-in scripts, CSS files and images to your web server.

                           

                           

                          Nancy O.

                          • 10. Re: Lightbox 1.0
                            TonyMancuso Community Member

                            Do you have an example like this for a MAC??

                            • 11. Re: Lightbox 1.0
                              Jon Fritz II MVP

                              AnthonyMancuso wrote:

                               

                              can someone please help me with this issue im still confuse. i still keep trying to view the portfolio in my page in live view and it works. then when i preview in safari or google chrome the pictures do not show. it still has a blank image with a question same with the big image as it pops up. and the effects dont work.....

                               

                              Is there any chance you accidentally saved your images as CMYK, rather than RGB?

                              • 12. Re: Lightbox 1.0
                                TonyMancuso Community Member

                                no i was using the adobe widget lightbox images still. i never changed them, i dont know how to import or export them properly, while the code would still work, or save it properly in your folders, then instert it on the site im working. thats why i was hoping if there is any reading tutorials or video i can see or read on what i have questiones on besides youtube. because they dont go into full details on how to do step by step, they just show you how to manipulate it only.

                                • 13. Re: Lightbox 1.0
                                  Nancy O. MVP

                                  My tutorial works with any jQuery plug-in regardless of platform (win/mac). 

                                   

                                  I suspect you haven't unzipped all the plug-in files yet. 

                                  Download StuffIt.  http://www.stuffit.com/mac-stuffit.html

                                  It works on Mac as well as Windows.

                                   

                                   

                                  Nancy O.

                                   

                                  Message was edited by: Nancy O.  changed link to StuffIt for mac.

                                  • 14. Re: Lightbox 1.0
                                    Nancy O. MVP

                                    Instead of using older Lightbox widget,  why don't you just use Fancybox? 

                                    It's more modern and can handle anything you toss at it.

                                    http://fancybox.net/

                                    • 15. Re: Lightbox 1.0
                                      TonyMancuso Community Member

                                      How would you use it with dreamweaver though

                                      • 16. Re: Lightbox 1.0
                                        Nancy O. MVP

                                        How would you use it with dreamweaver though

                                         

                                        The same way you use all jQuery plug-ins.  By extracting files to your local site folder and editing your code.

                                        http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html

                                         

                                         

                                         

                                        Nancy O.

                                        • 17. Re: Lightbox 1.0
                                          TonyMancuso Community Member

                                          Oh so this is a widget that will appear in dreamweaver just like the

                                          Lightbox and and clear box once you extra it???

                                          • 18. Re: Lightbox 1.0
                                            TonyMancuso Community Member

                                            Extract it*?

                                            • 19. Re: Lightbox 1.0
                                              TonyMancuso Community Member

                                              Aww man but I see that you have to ask the authors permission when using his

                                              products to sell lolŠ.

                                              • 20. Re: Lightbox 1.0
                                                Nancy O. MVP

                                                Fancybox 1.3.4 is free  - unless you care to make a donation.

                                                http://fancybox.net/howto

                                                 

                                                If you prefer to use another lightbox alternative, there are literally dozens of them on the web.  Do a Google search to find them.

                                                 

                                                 

                                                 

                                                Nancy O.