Skip navigation
Currently Being Moderated

Help.. FancyBox Code

May 31, 2013 4:59 PM

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>

 
Replies
  • Currently Being Moderated
    May 31, 2013 5:23 PM   in reply to 2wsx3edc

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 31, 2013 6:11 PM   in reply to 2wsx3edc

    <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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 31, 2013 8:05 PM   in reply to 2wsx3edc

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2013 1:52 AM   in reply to 2wsx3edc

    Change:

     

    class="fancybox"

     

    to:

     


    class="fancybox-thumbs"

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2013 11:17 AM   in reply to 2wsx3edc

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2013 5:29 PM   in reply to 2wsx3edc

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 2, 2013 2:17 AM   in reply to 2wsx3edc

    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;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 2, 2013 10:05 PM   in reply to 2wsx3edc

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 2, 2013 11:39 PM   in reply to 2wsx3edc

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 3, 2013 3:17 PM   in reply to 2wsx3edc

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points