How can I prevent an iframe from trying to use the javascript of the parent page? -
i'm trying embed this gallery (warning, nude art content) in webpage using frames.
the problem have have dropdown menu uses javascript fade pages in , out.this conflicting javascript in gallery. see gallery functioning in site, can click here , scroll on gallery , click "for sale." works in chrome , safari. in firefox, won't let images scroll @ bottom, stack. know has line 15 of gallery below code, can't figure out how fix it.
code gallery:
<!doctype html> <html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="css.css"> <link href='http://fonts.googleapis.com/css?family=open+sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.allenamistral.com/play_site/jsreplacecontent/jquery.easing.1.3.js"></script> <script type="text/javascript"> jquery.noconflict(); (function($) { $(window).load(function() { sliderleft=$('#thumbscroller .container').position().left; padding=$('#outer_container').css('paddingright').replace('px', ''); sliderwidth=$(window).width()-padding; $('#thumbscroller').css('width',sliderwidth); var totalcontent=0; $('#thumbscroller .content').each(function () { totalcontent+=$(this).innerwidth(); $('#thumbscroller .container').css('width',totalcontent); }); $('#thumbscroller').mousemove(function(e){ if($('#thumbscroller .container').width()>sliderwidth){ var mousecoords=(e.pagex - this.offsetleft); var mousepercentx=mousecoords/sliderwidth; var destx=-(((totalcontent-(sliderwidth))-sliderwidth)*(mousepercentx)); var theposa=mousecoords-destx; var theposb=destx-mousecoords; var animspeed=600; //ease amount var easetype='easeoutcirc'; if(mousecoords==destx){ $('#thumbscroller .container').stop(); } else if(mousecoords>destx){ //$('#thumbscroller .container').css('left',-theposa); //without easing $('#thumbscroller .container').stop().animate({left: -theposa}, animspeed,easetype); //with easing } else if(mousecoords<destx){ //$('#thumbscroller .container').css('left',theposb); //without easing $('#thumbscroller .container').stop().animate({left: theposb}, animspeed,easetype); //with easing } } }); var fadespeed=200; $('#thumbscroller .thumb').each(function () { $(this).fadeto(fadespeed, 0.6); }); $('#thumbscroller .thumb').hover( function(){ //mouse on $(this).fadeto(fadespeed, 1); }, function(){ //mouse out $(this).fadeto(fadespeed, 0.6); } ); }); $(window).resize(function() { //$('#thumbscroller .container').css('left',sliderleft); //without easing $('#thumbscroller .container').stop().animate({left: sliderleft}, 400,'easeoutcirc'); //with easing $('#thumbscroller').css('width',$(window).width()); sliderwidth=$(window).width(); }); })(jquery); </script></head> <body> <h1 style="font: open sans">for sale pieces</h1> <div id="fp_gallery" class="fp_gallery"> <img src="full_images/torso1.png" alt="" class="fp_preview" style="display:none;"/> <div id="fp_loading" class="fp_loading"></div> <div id="fp_next" class="fp_next"></div> <div id="fp_prev" class="fp_prev"></div> <div id="outer_container"> <div id="thumbscroller"> <div class="container"> <div class="content"> <div><a href="#"><img src="thumbs/tthumb1.jpg" alt="full_images/torso1.png" class="thumb" /></a></div> </div> </div> </div> </div> <div id="fp_thumbtoggle" class="fp_thumbtoggle">view thumbs</div> </div> <div> </div> <!-- javascript --> <script type="text/javascript" src="http://www.allenamistral.com/play_site/jsreplacecontent/jquery.easing.1.3.js"></script> <script type="text/javascript"> jquery.noconflict(); (function($) { $(function() { //current thumb's index being viewed var current = -1; //cache elements var $btn_thumbs = $('#fp_thumbtoggle'); var $loader = $('#fp_loading'); var $btn_next =$('#fp_next'); var $btn_prev = $('#fp_prev'); var $thumbscroller = $('#thumbscroller'); //total number of thumbs var nmb_thumbs = $thumbscroller.find('.content').length; //preload thumbs var cnt_thumbs = 0; for(var i=0;i<nmb_thumbs;++i){ var $thumb = $thumbscroller.find('.content:nth-child('+parseint(i+1)+')'); $('<img/>').load(function(){ ++cnt_thumbs; if(cnt_thumbs == nmb_thumbs) //display thumbs on bottom of page showthumbs(2000); }).attr('src',$thumb.find('img').attr('src')); } //make document scrollable //when the mouse moved up/down //the user able see full image makescrollable(); //clicking on thumb... $thumbscroller.find('.content').bind('click',function(e){ var $content= $(this); var $elem = $content.find('img'); //keep track of current clicked thumb //it used navigation arrows current = $content.index()+1; //get positions of clicked thumb var pos_left = $elem.offset().left; var pos_top = $elem.offset().top; //clone thumb , place //the clone on top of var $clone = $elem.clone() .addclass('clone') .css({ 'position':'fixed', 'left': pos_left + 'px', 'top': pos_top + 'px' }).insertafter($('body')); var windoww = $(window).width(); var windowh = $(window).height(); //animate clone center of page $clone.stop() .animate({ 'left': 410 + 'px', 'top': windowh/2 + 'px', 'margin-left' :-$clone.width()/2 -5 + 'px', 'margin-top': -$clone.height()/2 -5 + 'px' },500, function(){ var $theclone = $(this); var ratio = $clone.width()/120; var final_w = 400*ratio; $loader.show(); //expand clone when large image loaded $('<img class="fp_preview"/>').load(function(){ var $newimg = $(this); var $currimage = $('#fp_gallery').children('img:first'); $newimg.insertbefore($currimage); $loader.hide(); //expand clone $theclone.animate({ 'opacity' : 0, 'top' : windowh/2 + 'px', 'left' : windoww/2 + 'px', 'margin-top' : '-200px', 'margin-left' : -final_w/2 + 'px', 'width' : final_w + 'px', 'height' : '400px' },1000,function(){$(this).remove();}); //now have 2 large images on page //fadeout old 1 new 1 gets shown $currimage.fadeout(2000,function(){ $(this).remove(); }); //show navigation arrows shownav(); }).attr('src',$elem.attr('alt')); }); //hide thumbs container hidethumbs(); e.preventdefault(); }); //clicking on "show thumbs" //displays thumbs container , hides //the navigation arrows $btn_thumbs.bind('click',function(){ showthumbs(500); hidenav(); }); function hidethumbs(){ $('#outer_container').stop().animate({'bottom':'-200px'},500); showthumbsbtn(); } function showthumbs(speed){ $('#outer_container').stop().animate({'bottom':'-20px'},speed); hidethumbsbtn(); } function hidethumbsbtn(){ $btn_thumbs.stop().animate({'bottom':'-120px'},500); } function showthumbsbtn(){ $btn_thumbs.stop().animate({'bottom':'-20px'},500); } function hidenav(){ $btn_next.stop().animate({'left':'-50px'},500); $btn_prev.stop().animate({'left':'-50px'},500); } function shownav(){ $btn_next.stop().animate({'left':'772px'},500); $btn_prev.stop().animate({'left':'0px'},500); } //events navigating through set of images $btn_next.bind('click',shownext); $btn_prev.bind('click',showprev); //the aim load new image, //place before old 1 , fadeout old 1 //we use current variable keep track //image comes next / before function shownext(){ ++current; var $e_next = $thumbscroller.find('.content:nth-child('+current+')'); if($e_next.length == 0){ current = 1; $e_next = $thumbscroller.find('.content:nth-child('+current+')'); } $loader.show(); $('<img class="fp_preview"/>').load(function(){ var $newimg = $(this); var $currimage = $('#fp_gallery').children('img:first'); $newimg.insertbefore($currimage); $loader.hide(); $currimage.fadeout(2000,function(){$(this).remove();}); }).attr('src',$e_next.find('img').attr('alt')); } function showprev(){ --current; var $e_next = $thumbscroller.find('.content:nth-child('+current+')'); if($e_next.length == 0){ current = nmb_thumbs; $e_next = $thumbscroller.find('.content:nth-child('+current+')'); } $loader.show(); $('<img class="fp_preview"/>').load(function(){ var $newimg = $(this); var $currimage = $('#fp_gallery').children('img:first'); $newimg.insertbefore($currimage); $loader.hide(); $currimage.fadeout(2000,function(){$(this).remove();}); }).attr('src',$e_next.find('img').attr('alt')); } function makescrollable(){ $(document).bind('mousemove',function(e){ var top = (e.pagey - $(document).scrolltop()/2) ; $(document).scrolltop(top); }); } }); })(jquery); </script> </body> </html> below code javascript tags , sample of how they're being used:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">$(document).ready(function(){ // hide div 2 default $('#wrapper2').show(); $('#faces').hide(); $('#hands').hide(); $('#torso').hide(); $('#about').hide(); $('#contact').hide(); $('#collab').hide(); $('#newgallery').hide(); $('.forsale').hide(); $('#calendar').hide(); }); }); </script> i'm sorry if repeat of question. tried looking on , on again , couldn't find make work perfectly. appreciated. if have remove javascript fading on main page, will, hoping workaround works without removing this.
thanks help!
Comments
Post a Comment