sickshot Posted August 4, 2015 Share Posted August 4, 2015 (edited) Hi Im using PS 1.6.0.9 and I cant get fancybox to work in my cms pages.... tried all tutorials mostly by Vekia but no success... please point me what is wrong.... below is my cms page source where fancybox is already seen. this is my image code: <a class="fancybox" href="http://chubika.com/243-thickbox_default/basket-skirt.jpg'>http://chubika.com/243-thickbox_default/basket-skirt.jpg"><img class="imgbor" style="border: 1px solid #808080; padding: 10px; margin: 10px 5px;" src="http://chubika.com/246-cart_default/basket-skirt.jpg" alt="" width="200" height="130" /></a> <!DOCTYPE HTML> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="en"><![endif]--> <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="en"><![endif]--> <!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="en"><![endif]--> <!--[if gt IE 8]> <html class="no-js ie9" lang="en"><![endif]--> <html lang="en" class="" > <head> <meta charset="utf-8" /> <title>TEST PAGE FOR GAL - Chubika Online Shop</title> <meta name="generator" content="PrestaShop" /> <meta name="robots" content="noindex,follow" /> <meta name="viewport" content="width=device-width, minimum-scale=0.25, maximum-scale=1.6, initial-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="icon" type="image/vnd.microsoft.icon" href="/img/favicon.ico?1435684427" /> <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico?1435684427" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/global.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/autoload/uniform.default.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/product.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/cms.css" type="text/css" media="all" /> <link rel="stylesheet" href="/js/jquery/plugins/fancybox/jquery.fancybox.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/modules/blocknewsletter/blocknewsletter.css" type="text/css" media="all" /> <link rel="stylesheet" href="/js/jquery/plugins/autocomplete/jquery.autocomplete.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/product_list.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/modules/blocksearch/blocksearch.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/modules/blockuserinfo/blockuserinfo.css" type="text/css" media="all" /> <link rel="stylesheet" href="/modules/themeconfigurator/css/hooks.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/modules/leomanagewidgets/assets/styles.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/modules/productcomments/productcomments.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/modules/blocktopmenu/css/blocktopmenu.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/modules/blocktopmenu/css/superfish-modified.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/modules/blockwishlist/blockwishlist.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/modules/blockcategories/blockcategories.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/leo_tshirt/css/modules/leocustomajax/leocustomajax.css" type="text/css" media="all" /> <script type="text/javascript"> var FancyboxI18nClose = 'Close'; var FancyboxI18nNext = 'Next'; var FancyboxI18nPrev = 'Previous'; var added_to_wishlist = 'Added to your wishlist.'; var ajaxsearch = true; var baseDir = 'http://chubika.com/'; var baseUri = 'http://chubika.com/'; var contentOnly = false; var displayList = false; var id_lang = 1; var instantsearch = false; var isGuest = 0; var isLogged = 0; var loggin_required = 'You must be logged in to manage your wishlist.'; var mywishlist_url = 'http://chubika.com/module/blockwishlist/mywishlist'>http://chubika.com/module/blockwishlist/mywishlist'; var page_name = 'cms'; var priceDisplayMethod = 1; var priceDisplayPrecision = 2; var quickView = false; var roundMode = 2; var search_url = 'http://chubika.com/search'; var static_token = '76bc1dfbfe3bfa486a1e8a987b80a1d5'; var token = 'a78ecbff953820b1f3edf2673a361588'; var usingSecureMode = false; var wishlistProductsIds = false; </script> <script type="text/javascript" src="/js/jquery/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="/js/jquery/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="/js/jquery/plugins/jquery.easing.js"></script> <script type="text/javascript" src="/js/tools.js"></script> <script type="text/javascript" src="/themes/leo_tshirt/js/global.js"></script> <script type="text/javascript" src="/themes/leo_tshirt/js/autoload/10-bootstrap.min.js"></script> <script type="text/javascript" src="/themes/leo_tshirt/js/autoload/15-jquery.total-storage.min.js"></script> <script type="text/javascript" src="/themes/leo_tshirt/js/autoload/15-jquery.uniform-modified.js"></script> <script type="text/javascript" src="/themes/leo_tshirt/js/cms.js"></script> <script type="text/javascript" src="/js/jquery/plugins/fancybox/jquery.fancybox.js"></script> <script type="text/javascript" src="/themes/leo_tshirt/js/modules/blocknewsletter/blocknewsletter.js"></script> <script type="text/javascript" src="/js/jquery/plugins/autocomplete/jquery.autocomplete.js"></script> <script type="text/javascript" src="/themes/leo_tshirt/js/modules/blocksearch/blocksearch.js"></script> <script type="text/javascript" src="/themes/leo_tshirt/js/modules/blocktopmenu/js/hoverIntent.js"></script> <script type="text/javascript" src="/themes/leo_tshirt/js/modules/blocktopmenu/js/superfish-modified.js"></script> <script type="text/javascript" src="/themes/leo_tshirt/js/modules/blocktopmenu/js/blocktopmenu.js"></script> <script type="text/javascript" src="/themes/leo_tshirt/js/modules/blockwishlist/js/ajax-wishlist.js"></script> <script type="text/javascript" src="/themes/leo_tshirt/js/tools/treeManagement.js"></script> <script type="text/javascript" src="/modules/leocustomajax/leocustomajax.js"></script> <link rel="stylesheet" type="text/css" href="http://chubika.com/themes/leo_tshirt/css/responsive.css'>http://chubika.com/themes/leo_tshirt/css/responsive.css"/> <link rel="stylesheet" type="text/css" href="http://chubika.com/themes/leo_tshirt/css/font-awesome.min.css'>http://chubika.com/themes/leo_tshirt/css/font-awesome.min.css"/> <!-- Begin elevateZoom Header block --> <link rel="stylesheet" type="text/css" href="http://chubika.com/modules/elevatezoom/css/styles.css'>http://chubika.com/modules/elevatezoom/css/styles.css" /> <script type="text/javascript" src="http://chubika.com/modules/elevatezoom/js/jquery.elevatezoom.min.js"></script> <script type="text/javascript"> var zoom_type = 'lens'; var zoom_fade_in = 400; var zoom_fade_out = 550; var zoom_cursor_type = 'crosshair'; var zoom_window_pos = 1; var zoom_scroll = true; var zoom_easing = true; var zoom_tint = true; var zoom_tint_color = '#000'; var zoom_tint_opacity = 0.4; var zoom_lens_shape = 'round'; var zoom_lens_size = 200; </script> <script type="text/javascript"> function applyElevateZoom(){ var src = $('.thickbox.shown').attr('href'); var bigimage = $('.fancybox.shown').attr('href'); $('#bigpic').elevateZoom({ zoomType: zoom_type, cursor: zoom_cursor_type, zoomWindowFadeIn: zoom_fade_in, zoomWindowFadeOut: zoom_fade_out, zoomWindowPosition: zoom_window_pos, scrollZoom: zoom_scroll, easing: zoom_easing, tint: zoom_tint, tintColour: zoom_tint_color, tintOpacity: zoom_tint_opacity, lensShape: zoom_lens_shape, lensSize: zoom_lens_size, zoomImage: bigimage }); } $(document).ready(function(){ applyElevateZoom(); $('#color_to_pick_list').click( function(){ restartElevateZoom(); } ); $('#color_to_pick_list').hover( function(){ restartElevateZoom(); } ); $('#views_block li a').hover( function(){ restartElevateZoom(); } ); }); function restartElevateZoom(){ $(".zoomContainer").remove(); applyElevateZoom(); } </script> <!-- End elevateZoom Header block --> <link rel="stylesheet" href="/themes/leo_tshirt/css/customize/test33.css" type="text/css" media="all" /> <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'> <!--[if IE 8]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body id="cms" class="cms cms-31 cms-test hide-left-column lang_en fullwidth"> <section id="page" data-column="col-xs-6 col-sm-6 col-md-4" data-type="grid"> <!-- Header --> <header id="header"> <section class="header-container"> <div id="topbar"> <div class="banner"> <div class="container"> <div class="row"> </div> </div> </div> <div class="nav"> <div class="container"> <div class="inner"> <nav><script type="text/javascript"> /* Blockusreinfo */ $(document).ready( function(){ if( $(window).width() < 991 ){ $(".header_user_info").addClass('btn-group'); $(".header_user_info .links").addClass('quick-setting dropdown-menu'); } else{ $(".header_user_info").removeClass('btn-group'); $(".header_user_info .links").removeClass('quick-setting dropdown-menu'); } $(window).resize(function() { if( $(window).width() < 991 ){ $(".header_user_info").addClass('btn-group'); $(".header_user_info .links").addClass('quick-setting dropdown-menu'); } else{ $(".header_user_info").removeClass('btn-group'); $(".header_user_info .links").removeClass('quick-setting dropdown-menu'); } }); }); </script> <!-- Block user information module NAV --> <div class="header_user_info pull-right"> <div data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-cog"></i><span>Top links </span></div> <ul class="links"> <li class="first"> <a id="wishlist-total" href="http://chubika.com/module/blockwishlist/mywishlist'>http://chubika.com/module/blockwishlist/mywishlist" title="My wishlists"><i class="fa fa-heart"></i>Wish List</a> </li> <li><a class="login" href="http://chubika.com/my-account'>http://chubika.com/my-account" rel="nofollow" title="Login to your customer account"> <i class="fa fa-unlock-alt"></i>Sign in </a></li> <li> <a href="http://chubika.com/my-account'>http://chubika.com/my-account" title="My account"><i class="fa fa-user"></i>My Account</a> </li> <li class="last"><a href="http://chubika.com/quick-order'>http://chubika.com/quick-order" title="Checkout" class="last"><i class="fa fa-check"></i>Checkout</a></li> </ul> </div> </nav> </div> </div> </div> </div> <div id="header-main"> <div class="container"> <div class="inner"> <div class="row"> <div id="header_logo" class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <a href="http://chubika.com/" title="Chubika Online Shop"> <img class="logo img-responsive" src="http://chubika.com/img/demo-1432054842.jpg" alt="Chubika Online Shop" width="236" height="63"/> </a> </div> <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9"> </div> </div> </div> </div> </div> </section> </header> <div id="leo-megamenu" class="clearfix"> <div class="container"> <div class="inner"> <div class="row" > <div class="widget col-lg-12 col-md-12 col-sm-12 col-xs-12 col-sp-12 no-padding" > <!-- Menu --> <div id="block_top_menu" class="sf-contener clearfix"> <div class="cat-title"><i class="fa fa-navicon"></i></div> <ul class="sf-menu clearfix menu-content"> <li><a href="http://chubika.com/content/4-about-us" title="About">About</a></li> <li><a href="http://chubika.com/3-shop" title="Shop">Shop</a><ul><li><a href="http://chubika.com/12-clothes" title="Clothes">Clothes</a><ul><li><a href="http://chubika.com/15-skirts-" title="Skirts ">Skirts </a></li><li><a href="http://chubika.com/16-waistcoat" title="Waistcoat">Waistcoat</a></li></ul></li><li><a href="http://chubika.com/13-accessorizes" title="Accessorizes">Accessorizes</a><ul><li><a href="http://chubika.com/17-bags" title="Bags">Bags</a></li><li><a href="http://chubika.com/18-hats" title="Hats">Hats</a></li><li><a href="http://chubika.com/19-belts" title="Belts">Belts</a></li><li><a href="http://chubika.com/20-hand-cuff" title="Hand Cuff">Hand Cuff</a></li><li><a href="http://chubika.com/21-ipad-bags" title="iPad Bags">iPad Bags</a></li></ul></li><li><a href="http://chubika.com/14-footwear-" title="Footwear ">Footwear </a><ul><li><a href="http://chubika.com/22-shoes-" title="Shoes ">Shoes </a></li><li><a href="http://chubika.com/23-gamaje" title="Gamaje">Gamaje</a></li></ul></li><li id="category-thumbnail"></li></ul></li><li><a href="http://chubika.com/content/10-projects-main" title="projects">projects</a></li> <li><a href="http://chubika.com/content/7-collaborations" title="collabrations">collabrations</a></li> <li><a href="http://chubika.com/content/8-upcomming" title="upcomming">upcomming</a></li> <li><a href="http://chubika.com/contact-us" title="contact">contact</a></li> </ul> </div> <!--/ Menu --> </div> </div> </div> </div> </div> <!-- Content --> <section id="columns" class="columns-container"> <div class="container"> <div class="row"> </div> <!-- End of .row --> <div class="row"> <!-- Center --> <section id="center_column" class="col-md-12"> <div id="breadcrumb" class="clearfix"> <!-- Breadcrumb --> <div class="breadcrumb clearfix"> <a class="home" href="http://chubika.com/" title="Return to Home"><i class="fa fa-home"></i></a> <span class="navigation-pipe" >></span> <span class="navigation_end"><a href="http://chubika.com/content/category/2-Projects">Projects</a></span><span class="navigation-pipe">></span> <span class="navigation_product">TEST PAGE FOR GAL</span> </div> <!-- /Breadcrumb --> </div> <div class="rte"> <a class="fancybox" href="http://chubika.com/243-thickbox_default/basket-skirt.jpg'>http://chubika.com/243-thickbox_default/basket-skirt.jpg"><img class="imgbor" style="border: 1px solid #808080; padding: 10px; margin: 10px 5px;" src="http://chubika.com/246-cart_default/basket-skirt.jpg" alt="" width="200" height="130" /></a> </div> <br /> </section> </div> </div> </section> <!-- Footer --> <footer id="footer" class="footer-container"> <section id="leo-footer-center" class="footer-center"> <div class="container"> <div class="inner"> <div id="social_block" class="block pull-right"> <h4 class="title_block">Follow</h4> <div class="block_content"> <ul> <li class="facebook"> <a target="_blank" href="http://www.facebook.com/Chubika1" class="btn-tooltip" data-original-title="Facebook"> <span>Facebook</span> </a> </li> <li class="twitter"> <a target="_blank" href="http://instagram.com/chubikaofficial" class="btn-tooltip" data-original-title="Twitter"> <span>Twitter</span> </a> </li> <li class="youtube"> <a target="_blank" href="http://www.youtube.com/channel/UC6xPa2H4340U8GDDnfCqQxQ " class="btn-tooltip" data-original-title="Youtube"> <span>Youtube</span> </a> </li> <li class="google-plus"> <a target="_blank" href="http://vimeo.com/chubika" class="btn-tooltip" data-original-title="Google Plus"> <span>Google Plus</span> </a> </li> <li class="pinterest"> <a target="_blank" href="http://www.pinterest.com/chubikashop" class="btn-tooltip" data-original-title="Pinterest"> <span>Pinterest</span> </a> </li> </ul> </div> </div> <script type="text/javascript"> var leoOption = { productNumber:0, productInfo:0, productTran:1, productCdown: 0, productColor: 0, } $(document).ready(function(){ var leoCustomAjax = new $.LeoCustomAjax(); leoCustomAjax.processAjax(); }); </script> <!-- MODULE Block footer --> <section class="footer-block block" id="block_various_links_footer"> <h4 class="title_block">Information</h4> <ul class="toggle-footer list-group bullet"> <li class="item"> <a href="http://chubika.com/content/1-delivery" title="Delivery"> Delivery </a> </li> <li class="item"> <a href="http://chubika.com/content/2-legal-notice" title="Legal Notice"> Legal Notice </a> </li> <li class="item"> <a href="http://chubika.com/content/3-terms-and-conditions-of-use" title="Terms and conditions "> Terms and conditions </a> </li> <li class="item"> <a href="http://chubika.com/content/4-about-us" title="About"> About </a> </li> <li class="item"> <a href="http://chubika.com/content/5-secure-payment" title="Secure payment"> Secure payment </a> </li> </ul> </section> <!-- /MODULE Block footer --> </div> </div> </section><!-- #footercenter --> <section id="footernav" class="footer-nav"> <div class="container"> <div class="inner"> <div id="powered" class="text-left"> Copyright 2014. All Rights Reserved. Developed By D2D </div><!-- #poweredby --> </div> </div> </section> </footer><!-- .footer-container --> </section><!-- #page --> <p id="back-top"> <a href="#top" title="Scroll To Top" alt="">Scroll To Top</a> </p> </body></html> Edited August 4, 2015 by sickshot (see edit history) Link to comment Share on other sites More sharing options...
sickshot Posted August 4, 2015 Author Share Posted August 4, 2015 (edited) also I have foun that this method works, but I have other Images in the same folder and want to have next/previous buttons. also image size auto detection not working. Background is set to this 600x600....any chances to do this??? <script type="text/javascript"> $('a.iframe').fancybox({ 'type' : 'iframe', 'width':600, 'height':600 }); </script><a class="iframe" rel="http://chubika.com/gals/test/" href="http://chubika.com/gals/test/a1.jpg"> <img src="http://chubika.com/246-cart_default/basket-skirt.jpg" /> </a> Edited August 4, 2015 by sickshot (see edit history) Link to comment Share on other sites More sharing options...
tiendatutorial Posted January 11, 2017 Share Posted January 11, 2017 try this Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now