20 Replies Latest reply: Jun 3, 2013 3:17 PM by Mike M RSS

    Help.. FancyBox Code

    2wsx3edc Community Member

      I downloaded fancybox code, but it doesn't have "fancy" effect on my thumbnail images. Could anyone check if I put code wrong? Thank you so much

       

      Below is the code I put on <head>

      <!-- Add jQuery library -->

      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

       

      <!-- Add fancyBox main JS and CSS files -->

      <link rel="stylesheet" herf="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />

      <script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js"></script>

       

      <!-- Add fancyBox - thumbnail helper (this is optional) -->

                <link rel="stylesheet" type="text/css" href="js/fancybox/source/helpers/jquery.fancybox-thumbs.css" />

          <link rel="stylesheet" type="text/css" href="js/fancybox/source/helpers/jquery.fancybox-buttons.css" />

                <script type="text/javascript" src="js/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>

          <script type="text/javascript" src="js/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>

       

      Below is image code

      <a class="fancybox" rel="group" href="food images/maincreeps.png" title="creps"><img src="Thumbs/creeps.png" style="margin-left:10px" width="95" height="74" /></a>  <a class="fancybox" rel="group" href="food images/maincreeps.png" title="Family"><img src="Thumbs/mainfruitsalad.png" width="95" height="74" alt="summer" /></a>

       

      End

      <script type=”text/javascript”>

      $(document).ready(function() {

      $(“.fancybox”).fancybox();

      });

      </script>

        • 1. Re: Help.. FancyBox Code
          Mike M Community Member

          There are a number of things it could be:

          First, double check to be 100% CERTAIN that all of your scripts and styesheets for Fancybox are properly referenced or linked in your code. That will kill the plugin faster than anything.

           

          Second, I never like using a remote jquery script. Visit http://code.jquery.com/jquery-1.10.1.min.js and download the latest, put it in your root folder and change:

          <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

          to:

          <script type="text/javascript" src="[location in your root folder]"></script>

           

          Third, is this a single image or part of a gallery?

          If a gallery, change:

          a class="fancybox"

          to:

          class="fancybox-buttons"

           

          Also, I find I get better results using:
          data-fancybox-group=""

          instead of:

          rel=""

           

          Of course it would be a tremendous help if you have a sevrer you could put the code to. Otherwise, it's all guewwsork on this end.

          • 2. Re: Help.. FancyBox Code
            2wsx3edc Community Member

            Thank you, somehow, it still doesn't show up the "fancy" effect after I change the code..I check code validation, and there is an error message showing " there is no attribute "herf" <link rel="stylesheet" type="text/css" herf="js/fancybox/source/jquery.fancybox.css" />...could this be reason?

             

            This is the website I am testing.

            http://www.akuiskitchen.com/

             

            On the right sidebar, I am trying to use fancy box thumbnail effect so the images can pop up when people click.

             

            Any help would really appreciate..

            • 3. Re: Help.. FancyBox Code
              Mike M Community Member

              <link rel="stylesheet" herf="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />

               

              Needs to be:

               

              <link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />

               

              I missed that the first time around.

              • 4. Re: Help.. FancyBox Code
                2wsx3edc Community Member

                Sorry, it is still doesn't work...do you mind checking again what's wrong on the code?..

                • 5. Re: Help.. FancyBox Code
                  Mike M Community Member

                  I did a few things and got it to work:

                  First, I fixed the herf to href in the link to the stylesheet:

                  <link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />

                   

                  Next, copy the following code and put it in a file called fancybox_defnintions.js (save it in your "js/fancybox/source" folder):

                  // JavaScript Document

                  $(document).ready(function() {

                              /*

                               *  Simple image gallery. Uses default settings

                               */

                   

                              $('.fancybox').fancybox();

                   

                              /*

                               *  Different effects

                               */

                   

                              // Change title type, overlay closing speed

                              $(".fancybox-effects-a").fancybox({

                                  helpers: {

                                      title : {

                                          type : 'outside'

                                      },

                                      overlay : {

                                          speedOut : 0

                                      }

                                  }

                              });

                   

                              // Disable opening and closing animations, change title type

                              $(".fancybox-effects-b").fancybox({

                                  openEffect  : 'none',

                                  closeEffect    : 'none',

                   

                                  helpers : {

                                      title : {

                                          type : 'over'

                                      }

                                  }

                              });

                   

                              // Set custom style, close if clicked, change title type and overlay color

                              $(".fancybox-effects-c").fancybox({

                                  wrapCSS    : 'fancybox-custom',

                                  closeClick : true,

                   

                                  openEffect : 'none',

                   

                                  helpers : {

                                      title : {

                                          type : 'inside'

                                      },

                                      overlay : {

                                          css : {

                                              'background' : 'rgba(85,164,194,0.85)'

                                          }

                                      }

                                  }

                              });

                   

                              // Remove padding, set opening and closing animations, close if clicked and disable overlay

                              $(".fancybox-effects-d").fancybox({

                                  padding: 0,

                   

                                  openEffect : 'elastic',

                                  openSpeed  : 150,

                   

                                  closeEffect : 'elastic',

                                  closeSpeed  : 150,

                   

                                  closeClick : true,

                   

                                  helpers : {

                                      overlay : null

                                  }

                              });

                   

                              /*

                               *  Button helper. Disable animations, hide close button, change title type and content

                               */

                   

                              $('.fancybox-buttons').fancybox({

                                  openEffect  : 'none',

                                  closeEffect : 'none',

                   

                                  prevEffect : 'none',

                                  nextEffect : 'none',

                   

                                  closeBtn  : false,

                   

                                  helpers : {

                                      title : {

                                          type : 'inside'

                                      },

                                      buttons    : {}

                                  },

                   

                                  afterLoad : function() {

                                      this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');

                                  }

                              });

                   

                   

                              /*

                               *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked

                               */

                   

                              $('.fancybox-thumbs').fancybox({

                                  prevEffect : 'none',

                                  nextEffect : 'none',

                   

                                  closeBtn  : false,

                                  arrows    : false,

                                  nextClick : true,

                   

                                  helpers : {

                                      thumbs : {

                                          width  : 50,

                                          height : 50

                                      }

                                  }

                              });

                   

                              /*

                               *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.

                              */

                              $('.fancybox-media')

                                  .attr('rel', 'media-gallery')

                                  .fancybox({

                                      openEffect : 'none',

                                      closeEffect : 'none',

                                      prevEffect : 'none',

                                      nextEffect : 'none',

                   

                                      arrows : false,

                                      helpers : {

                                          media : {},

                                          buttons : {}

                                      }

                                  });

                   

                              /*

                               *  Open manually

                               */

                   

                              $("#fancybox-manual-a").click(function() {

                                  $.fancybox.open('1_b.jpg');

                              });

                   

                              $("#fancybox-manual-b").click(function() {

                                  $.fancybox.open({

                                      href : 'iframe.html',

                                      type : 'iframe',

                                      padding : 5

                                  });

                              });

                   

                              $("#fancybox-manual-c").click(function() {

                                  $.fancybox.open([

                                      {

                                          href : '1_b.jpg',

                                          title : 'My title'

                                      }, {

                                          href : '2_b.jpg',

                                          title : '2nd title'

                                      }, {

                                          href : '3_b.jpg'

                                      }

                                  ], {

                                      helpers : {

                                          thumbs : {

                                              width: 75,

                                              height: 50

                                          }

                                      }

                                  });

                              });

                   

                   

                          });

                   

                  Add reference to it in your <head>

                  <script type="text/javascript" src="js/fancybox/source/fancybox_definitions.js"></script>


                  At the bottom of the page, change:

                   

                  <script type=”text/javascript”>

                  $(document).ready(function() {

                  $(“.fancybox”).fancybox();

                  });

                  </script>

                   

                  to:

                   

                  <script type=”text/javascript”>

                  $(document).ready(function() {

                  $('.fancybox').fancybox();

                  });

                  </script>

                   

                  This will give it proper syntax.

                   

                  Next, since spaces in filepaths don't play well with fancybox, I had to change the folders, food images, and side images to food_images and side_images. Then I did a sitewide Find and replace (ctrl+f) of all source code "food%20images" to "food_images" and "side%20images" to "side_images".

                   

                  Finally, I noticed both thumbnails were pointing to the same large image(food_images/maincreeps.png), so I changed the second one to food_images/mainfruitsalad.png from maincreeps.png. It cycles through once there is more than one image.

                   

                  I did the above and it works fine.

                  • 6. Re: Help.. FancyBox Code
                    2wsx3edc Community Member

                    Thank you so much, OMG, you save my day!!!! I was trying to figure it out this for a long time...There are just so many scripts online but not work....THANK YOU!!

                     

                    One last small QS...is there way I can add upcoming thumbnail image in the bottom when I browse the images? I saw the thumbnail helper from fancybox website http://fancyapps.com/fancybox/#instructions and wonder if we can do the same scripts on the webpage.

                    • 7. Re: Help.. FancyBox Code
                      Mike M Community Member

                      Change:

                       

                      class="fancybox"

                       

                      to:

                       


                      class="fancybox-thumbs"

                       

                      for each linked image and it will do the rest for you.

                      • 8. Re: Help.. FancyBox Code
                        2wsx3edc Community Member

                        sorry, it doesn't work...I changed all the image class to class="fancykbox-thumbs". Actaully, the fancy effect is gone after I change class to "fancybox-thumbs"

                         

                        This is what I change:

                        <a class="fancybox-thumbs" rel="gallery" href="food_images/maincreeps.png" title="creps"><img src="Thumbs/creeps.png" style="margin-left:10px" width="95" height="74" alt="creps" /></a>

                         

                        <a class="fancybox-thumbs" rel="gallery" href="food_images/mainfruitsalad.png" title="summer"><img src="Thumbs/mainfruitsalad.png" width="95" height="74" alt="summer" /></a>

                        • 9. Re: Help.. FancyBox Code
                          2wsx3edc Community Member

                          I figured it out. Thanks for the update. I also change the end tag to "fancybox-thumbs" then it is working!!

                          Again, thank you so much!!

                          • 10. Re: Help.. FancyBox Code
                            Mike M Community Member

                            The only change I made was the class to "fancybox-thumbs". Here's the result:

                            6-1-2013-11-10-29-AM.jpg

                             

                            Here's the source code for the page:

                             

                            <!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>Claire Kitchen</title>

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

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

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

                             

                            <!-- Add jQuery library -->

                            <script type= "text/javascript" src="js/jquery-1.9.1.min.js"></script>

                             

                            <!-- Add fancyBox main JS and CSS files -->

                            <link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />

                            <script type= "text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js"></script>

                             

                            <!-- Add fancyBox - thumbnail helper (this is optional) -->

                            <link rel="stylesheet" type="text/css" href="js/fancybox/source/helpers/jquery.fancybox-thumbs.css" />

                            <link rel="stylesheet" type="text/css" href="js/fancybox/source/helpers/jquery.fancybox-buttons.css" />

                            <script type= "text/javascript" src="js/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>

                            <script type= "text/javascript" src="js/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>

                            <script type="text/javascript" src="js/fancybox/source/fancybox_definitions.js"></script>

                            </head>

                            <body>

                            <div class="container">

                              <div class="header">

                                <p><img src="side_images/ah1.png" style="margin-top: 30px; margin-left:330px" width="75" height="85" alt="ah" /></p>

                                <p><img src="side_images/kui1.png" style="margin-top: -100px; margin-left: 430px" width="75" height="85" alt="kui" /></p>

                                <p><img src="side_images/s1.png" style="margin-top: -100px; margin-left: 530px" width="83" height="91" alt="de" /></p>

                                <p><img src="side_images/do1.png" style="margin-top: -10px; margin-left: 390px" width="75" height="85" alt="do" /></p>

                                <p><img src="side_images/ka1.png" style="margin-top: -90px; margin-left: 500px" width="75" height="85" alt="ka" /></p>

                                <p><img src="side_images/cookies.png" style="margin-top: -250px; margin-left: 660px" width="358" height="308" alt="cookies" /></p>

                                <p><img src="side_images/potatobun.png" style="margin-top: -250px; margin-left: 980px" width="356" height="350" alt="bun" /></p>

                                <p><img src="side_images/stickynote-4.png" style="margin-top: -210px; margin-left: 350px" width="272" height="276" alt="notes"/></p>

                              </div>

                              <!-- end .header -->

                              <div class="sidebar1">

                                <p align="center"><img src="side_images/cat.png" style="margin-top: 50px" width="180" height="240" alt="cat1" /></p>

                                <p><font size="+3">A Kui's Kitchen</font></p>

                                <p align="center"><font size="+1">首頁            餐點收藏室</font></p>

                                <p align="center"><font size="+1">連絡阿桂        版上留言</font></p>

                                <img src="side_images/sunny.png" width="60" height="54" alt="sunny" /><img src="side_images/cloud.png" width="170" height="81" alt="eatmenu" />

                                <ul class="nav">

                                  <li>

                                    <p class="sidebartext"><a href="creeps.html" style="color: rgba(255,255,255,1)" target="_blank">豆豆鬆餅套餐</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="soybeanmilk.html" style="color: rgba(255,255,255,1)" target="_blank">香濃黑豆漿</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="brownrice.html" style="color: rgba(255,255,255,1)" target="_blank">營養滿分糙米飯</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="fishpeanut.html" style="color: rgba(255,255,255,1)" target="_blank">小魚炒花生</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="spanichpork.html" style="color: rgba(255,255,255,1)" target="_blank">翠玉波菜豬肉餃</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="brownricemilk.html" style="color: rgba(255,255,255,1)" target="_blank">糙米漿</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="sweetpotatobun.html" style="color: rgba(255,255,255,1)" target="_blank">雙色地瓜饅頭</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="jingjingbun.html" style="color: rgba(255,255,255,1)" target="_blank">全麥京醬包子</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="greenonionbun.html" style="color: rgba(255,255,255,1)" target="_blank">蔥花捲</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="stuffedbuns.html" style="color: rgba(255,255,255,1)" target="_blank">一包三吃</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="steaksauce.html" style="color: rgba(255,255,255,1)" target="_blank">西式牛排醬</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="summerfruitsalad.html" style="color: rgba(255,255,255,1)" target="_blank">夏日輕食水果沙拉</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="lemoncream.html" style="color: rgba(255,255,255,1)" target="_blank">檸檬鮮奶油</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="pizza.html" style="color: rgba(255,255,255,1)" target="_blank">雞肉彩椒披薩</a></p>

                                  </li>

                                  <li>

                                    <p class="sidebartext"><a href="strawberyjelly.html" style="color: rgba(255,255,255,1)" target="_blank">有機草莓果醬</a></p>

                                  </li>

                                </ul>

                                <p class="sidebartext"><font color="#00BF00"><strong>(下期推出)</strong></font></p>

                                <p class="sidebartext">肉餡漫談</p>

                                <p class="sidebartext">地瓜奶油濃湯</p>

                                <p class="sidebartext">草莓牛奶</p>

                                <p class="sidebartext">奶酥小西餅</p>

                                <p class="sidebartext">中式蛋塔</p>

                                <p class="sidebartext">全麥蜂蜜杏仁曲奇餅</p>

                                <p class="sidebartext">焦糖鮮奶油布丁</p>

                                <p class="sidebartext"> </p>

                                <p><img src="side_images/sunny.png" width="60" height="54" alt="sunny" /><img src="side_images/love.png" width="170" height="81" alt="favorite" /></p>

                                <p class="sidebartext"><a href="http://www.wretch.cc/blog/mitong/" style="color: rgba(255,255,255,1)" target="_blank">小小米桶的寫食廚房</a></p>

                                <p class="sidebartext"><a href="http://www.wretch.cc/blog/theqs/" style="color: rgba(255,255,255,1)" target="_blank">安居街401號</a></p>

                                <p class="sidebartext"><a href="http://blog.udn.com/bonnie8nz/article/" style="color: rgba(255,255,255,1)" target="_blank">紐西蘭美女的家</a></p>

                                <p class="sidebartext"><a href="http://blog.xuite.net/iq943/recipe/" style="color: rgba(255,255,255,1)" target="_blank">窮學生懶人食譜</a></p>

                                <p class="sidebartext"><a href="http://blog.xuite.net/iq943/ez37/" style="color: rgba(255,255,255,1)" target="_blank">窮學生超省錢旅行秘笈</a></p>

                                <p class="sidebartext"><a href="http://blog.fashionguide.com.tw/157/posts/" style="color: rgba(255,255,255,1)" target="_blank">小獸醫診療經驗分享</a></p>

                                <p class="sidebartext"><a href="http://blog.udn.com/Librakim/" style="color: rgba(255,255,255,1)" target="_blank">K。舊金山芭莉</a></p>

                                <p class="sidebartext"><a href="http://fatcat888.blogspot.com/2010/04/french-toast.html" style="color: rgba(255,255,255,1)" target="_blank">肥貓網誌</a></p>

                                <p class="sidebartext"><a href="http://www.wretch.cc/blog/EmilyHH/" style="color: rgba(255,255,255,1)" target="_blank">珍愛食譜</a></p>

                                <p class="sidebartext"><a href="http://amanda326.pixnet.net/blog/" style="color: rgba(255,255,255,1)" target="_blank">Amanda的燥咖</a></p>

                                <p class="sidebartext"><a href="http://yingxue1214.mysinablog.com/" style="color: rgba(255,255,255,1)" target="_blank">非限定小棧</a></p>

                                <p class="sidebartext"><a href="http://silent-frequency.blogspot.com/" style="color: rgba(255,255,255,1)">寂靜的頻率</a></p>

                                <p class="sidebartext"><a href="http://goldendonkey.pixnet.net/blog/" style="color: rgba(255,255,255,1)" target="_blank">灣區生活萬花筒</a></p>

                                <p class="sidebartext"><a href="http://blog.yam.com/co8780/" style="color: rgba(255,255,255,1)" target="_blank">CoCo烘培坊</a></p>

                                <p class="sidebartext"><a href="http://blog.yam.com/user/lin541031.html" style="color: rgba(255,255,255,1)" target="_blank">幸福廚坊</a></p>

                                <p class="sidebartext"><a href="http://blog.yam.com/user/stency.html" style="color: rgba(255,255,255,1)" target="_blank">陽光廚娘</a></p>

                                <p class="sidebartext"><a href="http://blog.yam.com/yi422/" style="color: rgba(255,255,255,1)" target="_blank">潔米拉</a></p>

                                <!-- end .sidebar1 --></div>

                              <div id="TabbedPanels1" class="TabbedPanels">

                                <ul class="TabbedPanelsTabGroup">

                                  <li class="TabbedPanelsTab" >幸福中式</li>

                                  <li class="TabbedPanelsTab" >中式麵點</li>

                                  <li class="TabbedPanelsTab" >家常西式</li>

                                </ul>

                                <div class="TabbedPanelsContentGroup">

                                  <div class="TabbedPanelsContent"><img src="side_images/tomato.png" style="margin-left: 735px" alt="tomato" name="tomato" width="230" height="131" /><a href="creeps.html" target="_blank"><img src="food_images/creepsframe1.png" alt="creeps" name="creeps" width="220" height="170" class="firstbodyimage" id="creeps" /></a><a href="soybeanmilk.html" target="_blank"><img src="food_images/soybeanmilkframe1.png" width="218" height="168" class="firstbodyimage" /></a><a href="brownrice.html" target="_blank"><img src="food_images/brownriceframe.png" alt="brownriceframe" name="brownriceframe" width="220" height="170" class="firstbodyimage" id="brownriceframe" /></a><a href="fishpeanut.html" target="_blank"><img src="food_images/fishpeanutframe.png" alt="fishpeanutframe" name="fishpeanutframe" width="222" height="172" class="secondbodyimage" id="fishpeanutframe" /></a><a href="spanichpork.html" target="_blank"><img src="food_images/spinachporkframe.png" alt="spanishpork" name="spanishpork" width="224" height="172" class="secondbodyimage" id="spanishpork" /></a> <a href="brownricemilk.html" target="_blank"><img src="food_images/brownricemilkframe.png" alt="brownricemilk" width="224" height="172" class="secondbodyimage" /></a></div>

                                  <div class="TabbedPanelsContent">Content 2</div>

                                  <div class="TabbedPanelsContent">Content 3</div>

                                </div>

                              </div>

                              <div class="content">

                                <h1><img src="side_images/orange.png"  style="vertical-align: middle" width="91" height="82" alt="orange" /> <u><font color="orange">About Today..</font></u></h1>

                                <p align="left">關於【阿桂的灶咖】這個部落格,剛開始只是想把做的菜記錄下來,將來好給我兒子、我孫子看(想太多...)。沒想到越做越有興趣,老爺和家人的鼓勵,讓我越來越認 真,每天拿著單眼拍照,實在到了走火入魔的程度...。我如果拿這種精神去考聯考,現在我大概已經是台大校友了。<br />

                                  <br />

                                  關於這個部落格,大家可能發現阿桂很愛碎碎念,所以部落格的文章也都落落長,看得人好辛苦。<br />

                                  <br />

                                  其實...<br />

                                  <br />

                                  有鑒於做飯就像「如人飲水,冷暖自知」,自家的灶咖配備當天的氣候乃至於做飯的心情等等都會影響到作品的成敗,食譜其實是越詳細越好。每次阿桂想做個新料理,都要參考各家不同的食譜,才能把 一些眉角全部抓透透,等到要做的時候,阿桂已經累到七葷八素、眼冒金星了。所以輪到阿桂寫部落格的時候,即使再累,阿桂都覺得有責任要讓讀者朋友們「看得懂」。大量的圖片加上文字敘述常常要花 掉阿桂好多時間,下班後的時間都花在這裡了。更別提邊做菜邊拍照,滿手的麵粉還只能一隻手拿著單眼相機,抖啊抖地照相,就是為了要盡量讓讀者朋友們做出「零失敗的料理」。最驚險的就是煮焦糖那 次,焦糖馬上要焦了,我還在按快門取角度...。<br />

                                  <br />

                                  阿桂從小看著外公媽媽揉麵,受到了啓發。現在則有好多貴人相助,包括老爺和我最親愛的家人。還有網路上的Carol老師,他的<a href="http://tw.myblog.yahoo.com/carol-jay/" target="_blank">Carol自在生活部落格</a>和<a href="http://www.books.com.tw/exep/prod/booksfile.php?item=0010513329" target="_blank">麵點新手必備的第一本書</a>,給我很大的啓發; <a href="http://homeeconomics.pixnet.net/blog/" target="_blank">周老師的美食教室</a>,也讓我學到了很多東西; 每天必看的型男大主廚; 還有數不清的格友的部落格; Youtube裡面的烹飪教學影片...現在阿桂也有了自己的部落格,希望能藉此跟大家互相交流分享。<img width="19" height="19" src="index1_clip_image001_0001.gif" alt=":D" /> <br />

                                  碎碎念完畢!</p>

                              </div>

                              <!-- end .content -->

                              <div class="sidebar2">

                                <p><img src="side_images/sunny.png" width="60" height="54" alt="sunny" /><img src="side_images/dishmenu.png" width="160" height="81" alt="menucloud" /> <a class="fancybox-thumbs" rel="gallery" href="food_images/maincreeps.png" title="鬆餅套餐"> <img src="Thumbs/creeps.png" style="margin-left:10px" width="95" height="74" alt="creps" /></a>  <a class="fancybox-thumbs" rel="gallery" href="food_images/mainfruitsalad.png" title="鬆餅套餐"><img src="Thumbs/mainfruitsalad.png" width="95" height="74" alt="summer" /></a><img src="Thumbs/thumbbun.png" style="margin-top:10px; margin-left:10px" width="95" height="74" alt="jingjing" />  <img src="Thumbs/thumbcookie.png" "width="95"height="74"alt="snack"/"><img src="Thumbs/thumbjelly.png" style="margin-top:10px; margin-left:10px" width="95" height="74" alt="jelly" />  <img src="Thumbs/thumbmallcookies.png" width="95" height="74" alt="cookies" /><img src="Thumbs/thumbmeat.png" style="margin-top:10px; margin-left:10px" width="95" height="74" alt="bun" />  <img src="Thumbs/thumbpudding.png" width="95" height="74" alt="pudding" /><img src="Thumbs/thumbricemilk.png" style="margin-top:10px; margin-left:10px" width="95" height="74" alt="ricemilk" />  <img src="Thumbs/thumbsbrownrice.png" width="95" height="74" alt="rice" /><img src="Thumbs/thumbseggtart.png" style="margin-top:10px; margin-left:10px" width="95" height="74" alt="egg" />  <img src="Thumbs/thumbsfish.png" width="95" height="74" alt="fish" /><img src="Thumbs/thumbsgreenonion.png" style="margin-top:10px; margin-left:10px" width="95" height="74" alt="greenonion" />  <img src="Thumbs/thumbspork.png" width="95" height="74" alt="pork" /><img src="Thumbs/thumbssoymilk.png" style="margin-top:10px; margin-left:10px" width="95" height="74" alt="soymilk" />  <img src="Thumbs/thumbsweetpotato.png" width="95" height="74" alt="potato" /></p>

                              </div>

                              <!-- end .container --></div>

                            <script type="text/javascript">

                            var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

                            </script>

                            <script type="text/javascript">

                            $(document).ready(function() {

                            $('.fancybox-buttons').fancybox();

                            });

                            </script>

                            </body>

                            </html>

                             

                            Copy that code into a new file and save it as "index-test.html". See if it works.

                            I'm using a "local" jquery file. but I doubt that changes anything.

                            • 11. Re: Help.. FancyBox Code
                              2wsx3edc Community Member

                              Thank you so much, C F! I will try it out later. Do you also know how to set up a hover effect when the mouse is hovering the images? I am trying to do a hover effect like clearbox lightbox, or just simple border effect when the mouse is hovering the images..

                              • 12. Re: Help.. FancyBox Code
                                Nancy O. CommunityMVP

                                Try applying CSS opacity to all your linked images like so.  Adjust values as required.

                                 

                                img a {opacity: 0.7}  /**this is opacity at 70%**/

                                 

                                img a:hover,

                                img a:focus,

                                img a:active {opacity:1.0}  /**this is opacity at 100%**/

                                 

                                 

                                 

                                Nancy O.

                                • 13. Re: Help.. FancyBox Code
                                  2wsx3edc Community Member

                                  Thanks, Nancy, it works great! but I only want to put on the gallery (right side bar) and bottom (food images)...I was trying to adjust fancybox-thumbs css since it seems already has hover effect...but when I change background color or color or opacity value, the image still doesn't have hover effect on it.. I see there is li.active and li:hover css under fancybox, but it seems doesn't work our although I was trying to add focus css..

                                   

                                  #fancybox-thumbs ul li.active {

                                            opacity: 0.75;

                                            padding: 0;

                                            border: 1px solid #FF3FFF;

                                  }

                                   

                                   

                                  #fancybox-thumbs ul li:hover {

                                            opacity: 1;

                                  }

                                  • 14. Re: Help.. FancyBox Code
                                    Mike M Community Member

                                    I'm pretty sure that because your fancybox thumbnails have links to the full size images, the code should be changed to :

                                     

                                    #fancybox-thumbs ul li a.active {

                                              opacity: 0.75;

                                              padding: 0;

                                              border: 1px solid #FF3FFF;

                                    }

                                     

                                     

                                    #fancybox-thumbs ul li a:hover {

                                              opacity: 1;

                                    }

                                    • 15. Re: Help.. FancyBox Code
                                      2wsx3edc Community Member

                                      sorry, but it doesn't work. I don't see hover effect after I change the code..

                                      • 16. Re: Help.. FancyBox Code
                                        Mike M Community Member

                                        I think I misunderstood your original intent.

                                         

                                        Are you looking to add a hover opacity to the thumbnails on the page, or the ones that appear as part of the fancybox?

                                         

                                        It makes a difference because one  you do in your page CSSand the other you do in the fancybox CSS.

                                        • 17. Re: Help.. FancyBox Code
                                          2wsx3edc Community Member

                                          I am trying to do it on the page so when the mouse hover the image on the main page, it will have hover effect. Nancy was really helpful for providing me the css code but it apply to all the images on the page..However, I only need the hover effect on image gallery or images on the spry panel on the page.

                                           

                                          I was trying to add a:hover a:focus and a:active on the fancybox-thumbs css, but it seems doesn't have hover effect on the page.

                                           

                                          Thanks  again,

                                          • 18. Re: Help.. FancyBox Code
                                            Mike M Community Member

                                            The fancybox-thumbs CSS will ONLY affect the items in the fancybox WHEN it's activated, so you don't want to add it there.

                                             

                                            Try this. Add the following to your PAGE CSS (clairekitchen2.css):

                                             

                                            .hovergallery img {

                                            -webkit-transform: scale(1.0); /*Webkit: Scale down image to 0.8x original size*/

                                            -moz-transform: scale(1.0); /*Mozilla scale version*/

                                            -o-transform: scale(1.0); /*Opera scale version*/

                                            -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/

                                            -moz-transition-duration: 0.5s; /*Mozilla duration version*/

                                            -o-transition-duration: 0.5s; /*Opera duration version*/

                                            opacity: 0.8; /*initial opacity of images*/

                                            margin: 0px; /*margin between images*/

                                            border-radius: 4px;

                                            }

                                            .hovergallery img:hover {

                                            -webkit-transform: scale(1.1); /*Webkit: Scale up image to 1.2x original size*/

                                            -moz-transform: scale(1.1); /*Mozilla scale version*/

                                            -o-transform: scale(1.1); /*Opera scale version*/

                                            box-shadow: 2px 2px 8px 5px #CCC; /*CSS3 shadow: 30px blurred shadow all around image*/

                                            -webkit-box-shadow: 2px 2px 8px 5px #CCC; /*Safari shadow version*/

                                            -moz-box-shadow: 2px 2px 8px 5px #CCC; /*Mozilla shadow version*/

                                            opacity: 1;

                                            border-radius: 4px;

                                            }

                                             

                                            Then, where the fancybox thumbnails are, change the DIV class from:

                                             

                                            <div class="sidebar2">

                                             

                                            to:

                                             

                                            <div class="sidebar2 hovergallery">

                                             

                                            You can "tweak" it from there by changing the opacity and scale (example: normal opacity can be 0.8 to make the images semi transparent, and 1.0 on hover to "highlight" them - scale can be 0.8 normally and 1.2 on hover so the images "grow" as they get darker) and lastly you can adjust the box-shadow for a 3D effect.

                                             

                                            try that and let me know if it does what you're looking for.

                                            • 19. Re: Help.. FancyBox Code
                                              2wsx3edc Community Member

                                              OH MY GOD, CF!! It looks GREAT!!, This is exactally what I am looking for!!!! I wish I can give you all my points. THANK YOU SO MUCH, oh, Lord, You don't know how much I feel so pleased now. Thank you again, my friend!!

                                              • 20. Re: Help.. FancyBox Code
                                                Mike M Community Member

                                                I'll be looking to see it when you get it all done. Fancybox is a really cool script. Way better than the original lightbox.