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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts

    fancybox script issues

    I am a newbie at javascript
    I am having a problem using and setting up fancybox iframe video
    is there someone here who has a little time and patience. I would really like to understand what is wrong with this.

    the test page is
    http://www.countyfairgrounds.net/tes...ersforhire,php

    There is an video iframe on the page on line 443. I have added a few lines to the basic css file and the css does validate.
    Can someone help me please?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,087
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Went to look today Saturday and the page is gone.
    Evolution - The non-random survival of random variants.

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

  • #3
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    its here
    http://www.countyfairgrounds.net/tes...ersforhire.php

    I will send you much much good karma if you can help me outta this situation and everyone on countyfairgrounds.net will be MOST thankful too - cause I bloody well cannot fix it. I "think" I got the right scripts loaded but am having trouble getting the youtube smaller and in the center when the image is clicked on AND there is no closing x tag.... the image does click to open the youtube however. I "think" it has something to do with my script in my header.
    <section class="video">
    <a rel="gallery" class="Fancybox fancybox.iframe" href="http://www.youtube.com/embed/QzGyjGff-Q4">
    <IMG Style="width:250;height:141;" alt="J.J. Harrison Rodeo Clown" src="http://www.countyfairgrounds.net/images/rodeoclownvideo.png"></a>
    </section>

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,087
    Thanks
    23
    Thanked 593 Times in 592 Posts
    When FancyBox ver 2 [really 2.1.4] is down loaded it has three folders: demo, source, and lib. In the demo is just that as index.html.
    I took your image and youtube link and made this: [Works Great!]
    Code:
    <link rel="stylesheet" type="text/css" href="http://www.countyfairgrounds.net/css/fancybox/jquery.fancybox.css" />
    <link rel="stylesheet" type="text/css" href="http://www.countyfairgrounds.net/js/fancybox/jquery.fancybox.pack.js" media="screen" />
    <script src="http://www.countyfairgrounds.net/js/fancybox/jquery.fancybox.js"></script>
    <script src="http://www.countyfairgrounds.net/js/fancybox/jquery.fancybox-buttons.js"></script>
    <script src="http://www.countyfairgrounds.net/js/fancybox/jquery.fancybox-thumbs.js"></script>
    In the head you can see the files needed to do a video in a fancy box.

    I than looked at your working site, found links at the end of the code and moved them up.
    I first looked for the needed files on your site - in the next code section they are there with full address. This works:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Entertainers for Hire</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="DESCRIPTION" content="Entertainers for Hire on Countyfairgrounds, USA.">
    <meta name="KEYWORDS" content="Countyfairgrounds, CountyFairsUSA, entertainment, hire a entertainer. " />
    <meta name="author" content="Karen Riedl">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><br>
    <link href="/entertainers/entertainersforhire.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="http://www.countyfairgrounds.net/css/fancybox/jquery.fancybox.css" />
    <link rel="stylesheet" type="text/css" href="http://www.countyfairgrounds.net/js/fancybox/jquery.fancybox.pack.js" media="screen" />
    <script src="http://www.countyfairgrounds.net/js/fancybox/jquery.fancybox.js"></script>
    <script src="http://www.countyfairgrounds.net/js/fancybox/jquery.fancybox-buttons.js"></script>
    <script src="http://www.countyfairgrounds.net/js/fancybox/jquery.fancybox-thumbs.js"></script>
      
    <script type="text/javascript">
    $(document).ready(function() {
    		$(".various").fancybox({
    		maxWidth	: 800,
    		maxHeight	: 600,
    		fitToView	: false,
    		width		: '70%',
    		height		: '70%',
    		autoSize	: false,
    		closeClick	: false,
    		openEffect	: 'none',
    		closeEffect	: 'none'
    	});
    });	
    </script>
     <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <!--[if lte IE 7]>
        <script src="js/IE8.js" type="text/javascript"></script><![endif]-->
    <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
      
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-2863503-1']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    <!-- Place this tag in the <head> of your document -->
    <link href="https://plus.google.com/110452655751837512539" rel="author" />
    <script type="text/javascript">
    window.___gcfg = {lang: 'en'};
    (function() 
    {var po = document.createElement("script");
    po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(po, s);
    })();</script>
    </head>
    <body>
     <header>
     
     <div id="inner">
     
    	<h1><a href="http://www.countyfairgrounds.net"><IMG STYLE="width:728px;height:60px;" 
    	alt="Entertainers for Hire" class="image" SRC="http://www.countyfairgrounds.net/images/entertainersforhire2012.gif">
    	</a></h1>
    	
    	
    	<div id="icons">
    		<a href="http://www.countyfairgrounds.net/RSS/weeklyfeed_allStates.xml" target="self">
    	<IMG STYLE="width:20px;height:20px;" alt="events by email" class="image" SRC="/images/rsssmall.jpg">
    	</a>
    	
    	<a href="http://www.youtube.com/watch?v=T3N9y91JOb4" target="self">
    	<IMG STYLE="width:20px;height:20px;"  alt="youtube" class="image" SRC="/images/youtubesmall.jpg"></a>
    	
    <a href="http://www.linkedin.com/in/karenriedl" target="self">
        <IMG STYLE="width:20px;height:20px;" class="image" alt="LinkedIN" SRC="/images/insmall.jpg">
        </a>
    	
    	<a href="http://pinterest.com/countyfairsusa/countyfairs/" target="self">
        <IMG STYLE="width:20px;height:20px;" class="image" alt="Pinterest" SRC="/images/pinterestsmall.jpg">
        </a>
    	
    	<a href="mailto:admin@countyfairgrounds.net" target="self">
        <IMG STYLE="width:20px;height:20px;" class="image" alt="EMail" SRC="/images/emailsmall.jpg">
        </a>
    	
    	<section class="facebook">
    	<!--[if IE]>
    <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.countyfairgrounds.net%2F&amp;layout=button_count&amp;show_faces=true&amp;width=300&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border-style:none; overflow:hidden; width:85px; height:21px;" allowTransparency="true">
    </iframe>
    <![endif]-->
    <!--[if !IE]>-->
    <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.countyfairgrounds.net%2F&amp;layout=button_count&amp;show_faces=true&amp;width=300&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" style="border-style:none; overflow:hidden; width:85px; height:21px;">
    </iframe>
    <!--<![endif]-->
    </section>
    	
    	   
    	
    <section class="twitter">
          <a href="http://twitter.com/share?url=http://www.countyfairgrounds.net&amp;via=coolkay&amp;count=horizontal" 
    	  class="twitter-share-button" rel="nofollow">Tweet</a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </section>
    	<section class="addthis">
    	<!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style ">
    <a class="addthis_counter addthis_pill_style"></a>
    </div>
    <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=coolkay"></script>
    <!-- AddThis Button END -->
    </section>
    </div>
       
        </div>
            <!--end inner division-->  
       <nav>
        <div  id="navbar" class="menu">
        <ul>
    <li><a href="http://www.countyfairsusa.net">Blog</a>
    </li>
    <li><a href="http://www.countyfairgrounds.net/postings/post.php">Post Stuff</a>
    </li>
    <li><a href="http://www.countyfairgrounds.net/getfairinfo/getfairinfo.php">Get Fair Info</a>
    </li>
    <li><a href="http://www.countyfairgrounds.net/podcast/podcasts.php">Podcast</a>
    </li>
    <li><a href="http://countyfairsusa.net/website-info/interview-requests/">Interview Requests</a></li>
     <li><a href="http://www.countyfairgrounds.net/nationwideevents/nationwideevents.php">Nationwide Events</a>
    </li>
    <li><a href="http://www.countyfairgrounds.net/sitestuff/sitestuff.php">Site Stuff</a></li>
     
    <li><a href="http://www.countyfairgrounds.net/store/stores.php">Stores</a></li>
     </ul>
    </div>
        </nav>
        
    </header>
    <div id="container">
    <div id="adcopy">    
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-8868574365252676";
    /* entertainersforhiretop */
    google_ad_slot = "5491314745";
    google_ad_width = 728;
    google_ad_height = 90;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </div>
    <aside id="featured" class="body"> 
    <article>
    <section>
    <div id="center">
    <section class="hgroup">
            <strong>
    <SCRIPT>
    <!-- Begin
    var months=new Array(13);
    months[1]="January";
    months[2]="February";
    months[3]="March";
    months[4]="April";
    months[5]="May";
    months[6]="June";
    months[7]="July";
    months[8]="August";
    months[9]="September";
    months[10]="October";
    months[11]="November";
    months[12]="December";
    var time=new Date();
    var lmonth=months[time.getMonth() + 1];
    var date=time.getDate();
    var year=time.getYear();
    if (year < 2000)
    year = year + 1900;
    document.write(lmonth + " ");
    document.write(date + ", " + year);
    // End -->
    </SCRIPT>
    </strong>
    </section>
      <section class="findafair">
        <strong> Find a County or State Fair!</strong>
        <br />     
                
                          
           <form name="menuForm"><select name="menu"
    style="font-family: Verdana,Arial,Helvetica; font-size: 11px;"
    onchange="top.location.href =this.options[this.selectedIndex].value;">
    <option value="">Select a State</option>
    <option value="http://www.countyfairgrounds.net/alabama/alabama.php">Alabama</option>
    <option value="http://www.countyfairgrounds.net/alaska/alaska.php">Alaska</option>
    <option value="http://www.countyfairgrounds.net/arizona/arizona.php">Arizona</option>
    <option value="http://www.countyfairgrounds.net/arkansas/arkansas.php">Arkansas</option>
    <option value="http://www.countyfairgrounds.net/california/california.php">California</option>
    <option value="http://www.countyfairgrounds.net/colorado/colorado.php">Colorado</option>
    <option value="http://www.countyfairgrounds.net/connecticut/connecticut.php">Connecticut</option>
    <option value="http://www.countyfairgrounds.net/delaware/delaware.php">Delaware</option>
    <option value="http://www.countyfairgrounds.net/dc/dc.php">District of Columbia</option>
    <option value="http://www.countyfairgrounds.net/florida/florida.php">Florida</option>
    <option value="http://www.countyfairgrounds.net/georgia/georgia.php">Georgia</option>
    <option value="http://www.countyfairgrounds.net/hawaii/hawaii.php">Hawaii</option>
    <option value="http://www.countyfairgrounds.net/idaho/idaho.php">Idaho</option>
    <option value="http://www.countyfairgrounds.net/illinois/illinois.php">Illinois</option>
    <option value="http://www.countyfairgrounds.net/indiana/indiana.php">Indiana</option>
    <option value="http://www.countyfairgrounds.net/iowa/iowa.php">Iowa</option>
    <option value="http://www.countyfairgrounds.net/kansas/kansas.php">Kansas</option>
    <option value="http://www.countyfairgrounds.net/kentucky/kentucky.php">Kentucky</option>
    <option value="http://www.countyfairgrounds.net/louisiana/louisiana.php">Louisiana</option>
    <option value="http://www.countyfairgrounds.net/maine/maine.php">Maine</option>
    <option value="http://www.countyfairgrounds.net/maryland/maryland.php">Maryland</option>
    <option value="http://www.countyfairgrounds.net/massachusetts/massachusetts.php">
    Massachusetts</option>
    <option value="http://www.countyfairgrounds.net/michigan/michigan.php">Michigan</option>
    <option value="http://www.countyfairgrounds.net/minnesota/minnesota.php">Minnesota</option>
    <option value="http://www.countyfairgrounds.net/mississippi/mississippi.php">Mississippi</option>
    <option value="http://www.countyfairgrounds.net/missouri/missouri.php">Missouri</option>
    <option value="http://www.countyfairgrounds.net/montana/montana.php">Montana</option>
    <option value="http://www.countyfairgrounds.net/nebraska/nebraska.php">Nebraska</option>
    <option value="http://www.countyfairgrounds.net/nevada/nevada.php">Nevada</option>
    <option value="http://www.countyfairgrounds.net/newhampshire/newhampshire.php">New
    Hampshire</option>
    <option value="http://www.countyfairgrounds.net/newjersey/newjersey.php">New Jersey</option>
    <option value="http://www.countyfairgrounds.net/newmexico/newmexico.php">New Mexico</option>
    <option value="http://www.countyfairgrounds.net/newyork/newyork.php">New York</option>
    <option value="http://www.countyfairgrounds.net/northcarolina/northcarolina.php">North
    Carolina</option>
    <option value="http://www.countyfairgrounds.net/northdakota/northdakota.php">North
    Dakota</option>
    <option value="http://www.countyfairgrounds.net/ohio/ohio.php">Ohio</option>
    <option value="http://www.countyfairgrounds.net/oklahoma/oklahoma.php">Oklahoma</option>
    <option value="http://www.countyfairgrounds.net/oregon/oregon.php">Oregon</option>
    <option value="http://www.countyfairgrounds.net/pennsylvania/pennsylvania.php">
    Pennsylvania</option>
    <option value="http://www.countyfairgrounds.net/rhodeisland/rhodeisland.php">Rhode
    Island</option>
    <option value="http://www.countyfairgrounds.net/southcarolina/southcarolina.php">South
    Carolina</option>
    <option value="http://www.countyfairgrounds.net/southdakota/southdakota.php">South
    Dakota</option>
    <option value="http://www.countyfairgrounds.net/tennessee/tennessee.php">Tennessee</option>
    <option value="http://www.countyfairgrounds.net/texas/texas.php">Texas</option>
    <option value="http://www.countyfairgrounds.net/utah/utah.php">Utah</option>
    <option value="http://www.countyfairgrounds.net/vermont/vermont.php">Vermont</option>
    <option value="http://www.countyfairgrounds.net/virginia/virginia.php">Virginia</option>
    <option value="http://www.countyfairgrounds.net/washington/washington.php">Washington</option>
    <option value="http://www.countyfairgrounds.net/westvirginia/westvirginia.php">West
    Virginia</option>
    <option value="http://www.countyfairgrounds.net/wisconsin/wisconsin.php">Wisconsin</option>
    <option value="http://www.countyfairgrounds.net/wyoming/wyoming.php">Wyoming</option>
    </select></form>
    </section>
    <section class="googleplus">	
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    <g:plus href="https://plus.google.com/116862303206035368817"  width="280" height="131"></g:plus>
    </section>
    <section class="search">
    <form method="get" action="http://www.countyfairgrounds.net/googlesearch.html">
    <input type="text"   name="q" size="25"
     maxlength="255" value="" />
    <input type="submit" value="Google Search" />
    <br />
    <input type="checkbox"  name="sitesearch"
     value="countyfairgrounds.net" checked /> search Countyfairgrounds.net<br /> &nbsp;&nbsp; and CountyFairsUSA.net <br />
    </form>
    </section>
          
            <!--end center division--></div>
    		
    		        
    <figure>
    <div id="figureleft">
    <section class="choicesale">
    <a href="http://shrsl.com/?~3f3x">
     <IMG STYLE="width:392px;height:60px;" class="image" alt="Choice Shirts Tees Sale" SRC="/images/choiceshirtsteessale.gif"></a>
     </section>
     <section class="choiceshirts">
     <a href="http://shrsl.com/?~3f3x">
     <IMG STYLE="width:280px;height:280px;"  alt="Americana Tees" SRC="/images/AmericanaTees.gif" /></a>
      </section>
    </div>
    <div id="figureright">
    <h2>Entertainer of the Month April 2013</h2>
    <h3>JJ Harrison Rodeo Clown</h3>
    <div id="maintext">
    JJ is a rodeo clown, with a master's degree, who used to teach social studies, and he is someone you should know!
    <br />
    <br />
    Here is a little more about JJ and a interview too!<br /><a href="http://countyfairsusa.net/states/colorado/jj-harrison-rodeo-clown/" target="self">JJ Harrison , Rodeo Clown</a>
    </div>
    <div id="entertainerofthemonth">
    <section class="photo">
    <IMG STYLE="width:200px;height:244px;"  alt="Clown And Bull" SRC="/images/ClownandBull.gif" />
    </section>
    <section class="video">
    	<a class="various fancybox.iframe" href="http://www.youtube.com/embed/QzGyjGff-Q4?autoplay=1">
    	<img style="alt="J.J. Harrison Rodeo Clown" src="http://www.countyfairgrounds.net/images/rodeoclownvideo.png">
    	</a>
    </section>
    </div>
    </div>
     </figure>
     
    					
    <div id="information">
    <section class="top">
    <h4>Promoters,
    <br />&nbsp;&nbsp;&nbsp; Looking for Entertainers ?</h4>
    			If you are in the business of hiring entertainers, this is the place to look. <br />
    			We have a lot of different kinds. The links are kept up to date and entertainers with bad urls are removed.
    			</section>
    			 <section class="register">
    			 			<h3>Entertainers<br />
              &nbsp;&nbsp;&nbsp;Would you like to Post in this Database?</h3>
    			Would you like to register for this database and get exposure to lots of county and state fairs and events?
    						<a href="http://www.countyfairgrounds.net/entertainers/entertainers.php" target="self">
    			Please go here to Register</a>
    			</section>
    			</div>
    		
    		
    		
    		
    		</section>
    		</article>
    		</aside>
    		
    		
    		   <div id="sidebar">
        <aside>
        <h2>View Entertainers</h2>
                    
    </aside>
    </div>  
      
      
        
        <div id="content" class="display">
     </div><!-- end content division --> 
     </div><!-- end container division --> 
      
    <footer>
    <div id="bottom">
    <div id="bottomleft">
      Countyfairgrounds, USA<br />PO Box 162<br />Pine, Colorado 80421
     </div>
     
     <div id="bottomright">
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-8868574365252676";
    /* entertainersforhirefooter */
    google_ad_slot = "7960108743";
    google_ad_width = 728;
    google_ad_height = 90;
    //-->
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
     </div>
     </div>
     
     
     </footer>
    		
    		
     <!-- Quantcast Tag -->
    <script type="text/javascript">
    var _qevents = _qevents || [];
    (function() {
    var elem = document.createElement('script');
    elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js";
    elem.async = true;
    elem.type = "text/javascript";
    var scpt = document.getElementsByTagName('script')[0];
    scpt.parentNode.insertBefore(elem, scpt);
    })();
    _qevents.push({
    qacct:"p-46ssQu1VP8xUY"
    });
    </script>
    <noscript>
    <div style="display:none;">
    <img src="//pixel.quantserve.com/pixel/p-46ssQu1VP8xUY.gif"  height="1" width="1" alt="Quantcast"/>
    </div>
    </noscript>
    <!-- End Quantcast tag -->
    </body>
    </html>
    I'll take karma in fives and tens [smilely face here]
    Last edited by sunfighter; 04-15-2013 at 10:08 PM.
    Evolution - The non-random survival of random variants.

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

  • #5
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    hi sunfighter = I have not had a chance to get to this today. Now with a glass of wine - well, it will have to wait till tomorrow. I really appreciate your help. I do have a question - I have been taught to put the js files in near the closing body tag. Does it make a difference? and why did you put them in the head? Or is it hust fancybox. I am new at javascript and jquery - and am feeling a little overwhelmed.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,087
    Thanks
    23
    Thanked 593 Times in 592 Posts
    I have always put the "calls to outside files" in the header; css first followed by javascript, and the order of these files based on dependency like jquery is loaded before files that use the framework. That is different than the coding itself. I also put my php above the doctype and try to place all of it there and not litter the html code with it.

    Back in the day, about two years ago when I was dragged kicking and screaming to use javascript, I was taught to place the code in the head. Soon that was causing problems, because some code executed before the page loaded so along came 'onload' and it's own problems. Then a new rule was passed to put javascript after the page but before the </body> tag. Good advice, you wont go wrong if you follow that(but who knows?).

    What I have found is js and jq functions need to be called and it makes no difference where they are placed normally(please notice my use of non-committal words. Because nothing is ever written in stone.) I usually place them in the header so I can see what going on as soon as I start to read the code.

    I did put some links and script calls in the header and that's Ok. Besides the calls I do have executable js code, but that is bounded by the $(document).ready(function() and wont execute until the page is loaded.

    Every programmer has his/her own style. That's mine. It is subject to change.
    Evolution - The non-random survival of random variants.

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

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,087
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Seems my origanal code didn't make it to the post Here it is. Easy to see without all the other stuff, but I left the programs in the folders fancybox packaged them in:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>fancyBox</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.pack.js" media="screen" />
    <!-- Add jQuery library -->
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="../source/jquery.fancybox.js"></script>
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    		$(".various").fancybox({
    		maxWidth	: 800,
    		maxHeight	: 600,
    		fitToView	: false,
    		width		: '70%',
    		height		: '70%',
    		autoSize	: false,
    		closeClick	: false,
    		openEffect	: 'none',
    		closeEffect	: 'none'
    	});
    });	
    </script>
    
    </head>
    <body>
    	<a class="various fancybox.iframe" href="http://www.youtube.com/embed/QzGyjGff-Q4?autoplay=1">
    	<img style="alt="J.J. Harrison Rodeo Clown" src="http://www.countyfairgrounds.net/images/rodeoclownvideo.png">
    	</a>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

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

  • #8
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    okay now if you will be patient I think we are getting someplace. That is first off where I am right now resisting javascript - I do know css3 and html5 - my site is built on it. As many years as I have used it - I am stilllearning new stuff with it. I do not php - I got a php guy - who does my php.
    First your code came okay in the post the first time you placed it - I have it - First question - I downloaded fancy box on the 13th - latest version - I believe, (and I absolutely LOVE it when they tell you how easy something is to use - and I certainly "KNOW" better!) anyway I see the three folders in the download. - demo, lib, source. They are not to clear about how to use the graphics. I am used to putting my graphics in my html .... so I am a little confused - obviously there is another way. Anyway. I do understand and am comfortable with the order of this
    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><br>
    <link href="/entertainers/entertainersforhire.css" rel="stylesheet" type="text/css">
    
    <link rel="stylesheet" type="text/css" href="http://www.countyfairgrounds.net/css/fancybox/jquery.fancybox.css" />
    However, I do not see this code anywhere in the downloaded fancybox folders.
    Code:
    <link rel="stylesheet" type="text/css" href="http://www.countyfairgrounds.net/js/fancybox/jquery.fancybox.pack.js" media="screen" />
    -where did it come from. I looked at all the js files in the folders I downloaded. I take it then this is needed for placing video? Please be patient - I am trying to understand as much as possible.
    AND I am not feeling at all comfortable with the javascript.... I am taking jquery lessons and like that better,.

  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,087
    Thanks
    23
    Thanked 593 Times in 592 Posts
    http://www.countyfairgrounds.net/js/...ncybox.pack.js
    is on your site the above address is it. It's in a folder named js that contains a folder named fancybox. The same place you put all of the js files.
    Evolution - The non-random survival of random variants.

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

  • #10
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    ah I found it - thanks. I am a little confused about the words in the link called media="screen" - is this new? cause I have never seen anything like that in a link before.
    at any rate here is the test link I am working on and we still have some problems
    Can you help?
    http://www.countyfairgrounds.net/tes...tertainers.php
    The pix of the cowboy is floating up and down as I scroll the page and it is messing up the code after it too. I finally figured out that if I put in our fancybox css folder the pix - it would work. ...here is the validation link
    http://html5.validator.nu/?doc=http%...tertainers.php

    This link shows its not a validation issue. Please help?

  • #11
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,087
    Thanks
    23
    Thanked 593 Times in 592 Posts
    I'll look a little later today.
    Media types for style sheets are cover on W3C here: http://www.w3.org/TR/CSS2/media.html
    Last edited by sunfighter; 04-18-2013 at 02:33 PM.
    Evolution - The non-random survival of random variants.

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

  • #12
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,087
    Thanks
    23
    Thanked 593 Times in 592 Posts
    You gave the anchor of the image an ID, id="fancybox-loading". Don't know why, but is is causing the image to be in a fixed state. Just remove the ID or edit the css.
    Evolution - The non-random survival of random variants.

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

  • #13
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    that id is in the fancybox.css file - if you do not give the image the id - then when you click on the image on the page you do not get the nice background or nice X when it loads.
    can you help me with the css - or should I take it to the html formum - I know css but we all write code differently unfortunately. This is causing a problem on this page that I thought might be a JS issue having the image float as the page is scrolled - is it?

  • #14
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,087
    Thanks
    23
    Thanked 593 Times in 592 Posts
    You are wrong
    Code:
    #fancybox-loading {
    	position: fixed; <<<<<<== fixes image so it will not move
    	top: 50%;        <<<<<<== These two put it right where we see it
    	left: 50%;        <<<<<<==  And where you don't want it!
    	margin-top: -22px;
    	margin-left: -22px;
    	background-position: 0 -108px;
    	opacity: 0.8;
    	cursor: pointer;
    	z-index: 8060;
    }
    Remove it. Does not add or take away Xes or the nice background(?)
    Evolution - The non-random survival of random variants.

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

  • #15
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I have never really understood fixed in css - maybe I got it better now.
    Thanks.

    Okay next question - in my original code of javascript I had input this line
    attr('rel', 'gallery')

    a video gallery is where it is flipping through videos in the same opening from one pix right? is that what that line does?

    I also have a question or two about the javascript code as I am a newbie here.
    can you give me a comment on each of these fields so I have a little of understanding of what each means? cause I don't
    fitToView : false,
    width : '70%',
    height : '70%',
    autoSize : false,
    closeClick : false,
    openEffect : 'none',
    closeEffect : 'none'


  •  
    Page 1 of 2 12 LastLast

    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
    •