Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Styling Fancybox code & Need help with script...

    Okay, so I wanted to do a pretty pop-up within my website and found fancybox had the easiest to use code for what I wanted to do. But, now that it's on my site the script is overriding my link styling. I set it as an HTML class and since the link has the fancybox class it won't work now. How do I add my link attributes to the script?

    Also, since I've loaded the script, my slider that rotated thru banners is no longer working on the page. I'm lost :[ Javascript scares me, I'm way more comfortable with HTML but there are certain things I want to have on my site so please help!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,445
    Thanks
    23
    Thanked 630 Times in 629 Posts
    Need a link to your site to see code.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The fancybox script is on this page: April Wraps! - Home
    The link attributes are in the style sheet, I can paste that separately let me know if you need that.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,445
    Thanks
    23
    Thanked 630 Times in 629 Posts
    fancybox is loading jquery-1.10.1.min.js and this is not compatible with your slideshow which uses jquery-1.7.min.js.
    Hope this helps
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, sort of. I don;t know much anout javascript other than where on my server to put the files, copy paste and a little teeny tiny bit of tweaking, Is it possible to have them both use 1.10.1 so both work? How difficult would that be?

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,445
    Thanks
    23
    Thanked 630 Times in 629 Posts
    I'd look for a newer slideshow program which would use 1.10.1.
    And I never figured out where the images were that fancybox worked with, so make sure that works.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have fancybox working now and I found a script that uses the 1.10.1 for the slider here: Image slider using jQuery Code Example - Runnable

    I've loaded it on to my page, followed all the instructions but it didn't work. So I tried condensing the scripts together to run wondering if one was going over the other, but it stil doesn't work. Any ideas? Here's the relevant code right now:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>April Wraps! - Home</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />  
    
    	<!--[if lt IE 8]>
           <div style=' clear: both; text-align:center; position: relative;'>
             <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
               <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
            </a>
          </div>
        <![endif]-->
        <!--[if lt IE 9]>
       		
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    	<!-- Add jQuery library -->
    	<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
      
      <script type="text/javascript" src="../source/jquery.nivo.slider.js"></script>
      
    	<!-- Add mousewheel plugin (this is optional) -->
    	<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
    
    	<!-- Add fancyBox main JS and CSS files -->
    	<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
    	<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
    
    	<!-- Add Button helper (this is optional) -->
    	<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    	<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    
    	<!-- Add Thumbnail helper (this is optional) -->
    	<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    	<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
    
    	<!-- Add Media helper (this is optional) -->
    	<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
    
    	<script type="text/javascript">   
        
    		$(document).ready(function() {
    			
    $(window).load(function() {
            $('#slider').nivoSlider();
        });
    
    /*
    			 *  Simple image gallery. Uses default settings
    			 */
    
    			$('.fancybox').fancybox();
    
    			// 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(238,238,238,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('images/aimee.jpg');
    			});
    
    			$("#fancybox-manual-b").click(function() {
    				$.fancybox.open({
    					href : 'nikki.html',
    					type : 'iframe',
    					padding : 5
    				});
    			});
    
    			$("#fancybox-manual-c").click(function() {
    				$.fancybox.open([
    					{
    						href : 'images/2_b.jpg',
    						title : 'Results After 2 Treatments - 8 wraps'
    					}, {
    						href : 'images/1_b.jpg',
    						title : 'Results After 1 Treatment  - 4 wraps'
    					}, {
    						href : 'images/3_b.jpg',
    						title: 'Results after 6 Wraps'
    					}
    				], {
    					helpers : {
    						thumbs : {
    							width: 75,
    							height: 50
    						}
    					}
    				});
    			});
    
    
    		});
    	</script>
    	<style type="text/css">
    		.fancybox-custom .fancybox-skin {
    			box-shadow: 0 0 50px #222;
    		}
    
    		body {
    			max-width: 700px;
    			margin: 0 auto;
    		}
    	</style>
    </head>
    <body>
    <div class="main">
    <!--==============================header=================================-->
    <header>
        <div>
            <h1><a href="http://apriljoanne.myitworks.com/shop/"><img src="images/logo.jpg" alt=""></a></h1>
            <div class="social-icons">
            	<span>Follow Us:</span>
                <a href="#" class="icon-3"></a>
                <a href="#" class="icon-2"></a>
                <a href="#" class="icon-1"></a>
            </div>
            <div id="wrapper">	
    	<div class="slider-wrapper">
                  <div id="slider" class="nivoSlider">
                
                    <!--  Images to slide through.  -->
                    <img src="images/slider-1.jpg" data-thumb="images/slider-1-small.jpg" alt="" />
                    <img src="images/slider-2.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
                    <img src="images/slider-3.jpg" data-thumb="images/nemo.jpg" alt="" />
                </div>
                <a href="#" class="prev"></a><a href="#" class="next"></a>
         </div>
    </div>
    
           <nav>
                <ul class="menu">
                    <li class="current"><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="https://apriljoanne.myitworks.com/join/">Join</a></li>
                    <li><a href="http://apriljoanne.myitworks.com/shop/">Products</a></li>
    		<li><a href="about.html">Why Wrap?</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>   
    ...
            <h2 class="p4">Change Your Life</h2>
            <div class="wrap block-1">
                <div>
                    <img src="images/nikki.jpg" alt="" class="img-border">
                    <h3>Nikki - Presidential Diamond</h3>
                    <p>"I make more money than my husband now... being an It Works! Distributor is more than just a pay check..."</p>
                    <a class="button" id="fancybox-manual-b" href="javascript:;">Read More...</a>
                </div>
                <div>
                    <img src="images/page1-img2.jpg" alt="" class="img-border">
                    <h3>Aimee - Loyal Customer</h3>
                    <p>"These are my personal results from the wraps. They were able to get rid of my left over stuff from having 5 kids. If you haven't tried them yet you should."</br></p>
                  <a class="button" id="fancybox-manual-c" href="javascript:;">More...</a>
                </div>
                ...
    </body>
    </html>
    And the nivo_slider script is in the right folder. I'm totally stumped.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,445
    Thanks
    23
    Thanked 630 Times in 629 Posts
    I can't find it nor the jquery-1.10.1.min.js
    Try using absolute paths to link them in.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •