I'm using angular 6 to create a testimonial slider.
It looks great, but the problem is... I'm using RouterLink in my header, so everything loads at once. When you open the page with testimonial javascript for the first time it works, but then when you go onto another page and re-direct back it does not work.
Has anyone encountered a similar issue?
Is there a way to modify this function so it loads on page-view rather than page-load?
Thanks
JS Code:
function mfnSliderTestimonials(){
var pager = function( el, i ){
var img = $( el.$slides[i] ).find('.single-photo-img').html();
return '<a>'+ img +'</a>';
};
$('.testimonials_slider_ul').each(function(){
var slider = $(this);
slider.slick({
cssEase : 'ease-out',
dots : true,
infinite : true,
touchThreshold : 10,
speed : 300,
adaptiveHeight : true,
appendDots : slider.siblings( '.slider_pager' ),
customPaging : pager,
autoplay : window.mfn_sliders.testimonials ? true : false,
autoplaySpeed : window.mfn_sliders.testimonials ? window.mfn_sliders.testimonials : 5000,
slidesToShow : 1,
slidesToScroll : 1
});
});
}
EDIT: WORKS
All working fine now. Even when re-routing. In thecomponent I've declared the javascript function in such way:
declare function YOURFUNCTION(): any;
#component......
ngOninit
YOURFUNTION()
and obviously import * as $ from 'jquery'; was also necessary!
Thanks
im trying to display inline using fancybox. but currently it pops up but displaying error "The requested content cannot be loaded. Please Try again later." . below is the code.
<script type="text/javascript">
jQuery(document).ready(function() {
$(".various").click(function() {
parent.$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'width' : 640,
'height' : 385,
'type' : 'inline'
});
return false;
});
});
</script>
and where i used fancybox
<a class="various" href="#inline3">Inline</a>
<div id="inline3" style="display:none;" ><img src="https://xxxxx" /></div>
FOUND A SOLUTION!
the thing is, i need to change type from inline to iframe. and also insert a 'href' string inside the javascript and remove the href from the link. and for the href value put in "this.href" ... and now it works.
ITs simple,
If the image is not loaded, it will happen,
Please check the image source in img tag then proceed.
$('.fancybox').fancybox({
autoSize : true,
autoResize : true,
autoDimensions : false,
padding: 25,
width : 630,
openEffect : 'elastic',
closeEffect : 'elastic',
type : 'iframe',
href :'Pass your url'
});
In my case, instead of using this.href, I passed url, and its working form me.
I've setup a PHP video browser on a website (check videos pod) when a video thumbnail is clicked a video should popup and play with the FancyBox script, but instead the video just does not load. Why is this?
You are using fancybox v2.x with options for fancybox v1.3.x (they are not compatible with each other.)
Your best bet is to get rid of this script :
<script type="text/javascript">
$(".videobox").click(function () {
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
</script>
and try this instead :
<script type="text/javascript">
$(document).ready(function () {
$(".videobox").fancybox({
width: 680,
height: 495,
type: "iframe"
}); // fancybox
}); // ready
</script>
notice that we are using type : "iframe" because you are using youtube embed mode
SIDE NOTE: You are loading two versions of jQuery (1.7.1 and 1.7.2) when you actually need a single instance (ideally the latest version) to avoid unexpected errors.
I have an iframe that's generated on-the-fly with the fancybox plugin. I want to get the clicked element inside of it and from that element get the src attribute but whenever I try I just get "undefined" as an answer.
what triggers the iframe creation is:
<a id="contentImageAJAX" class="iframe" href="/tools/images?keyword=cat" style="display:none;">g</a>
and
$('#contentImage').focus(function(){
var $contentImage = $('#contentImage');
$('a#contentImageAJAX').click().fancybox({
'width' : 1280,
'height': 600,
'centerOnScroll': true,
'hideOnContentClick' : true,
'onCleanup': function(){tryMe($contentImage);}
});
I found out that the iframe created is #fancybox-frame so I tried:
$('#fancybox-frame').load(function(){
$('#fancybox-frame').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
});
but it didn't work and "tryMe" is this function:
function tryMe($cImg){
console.log($('#fancybox-frame').contents().find('clickable').attr('src'));
}
I've been trying several iterations of this for hours any idea what am I missing?
The selector inside tryMe method is is wrong find('clickable'). I think you are looking for find('.clickable').
Try this
$('a#contentImageAJAX').click().fancybox({
'width' : 1280,
'height': 600,
'centerOnScroll': true,
'hideOnContentClick' : true,
'onCleanup': function(){parent.tryMe($contentImage);},
'onComplete': function(){
$('#fancybox-frame').contents().find('linkSelector').click(function(){
//Do you stuff here.
});
}
});
I have successfully setup tinymce to work on a page within an iframe. Everything works perfectly.
However, when you use imagemanager to pick an image to be inserted or replaced in the editor it will not copy the path(and filename) of the image to the "Image URL" input in the "Insert/edit image" box. The box will either remain empty or keep the address of the previous image.
The behaviour is the same with the filemanager plugin.
tinyMCE.init(
{
mode : "none",
editor_selector : "mceEditor",
theme : "advanced",
plugins : "filemanager,imagemanager,autoresize,safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,spellchecker",
theme_advanced_buttons1 : "insertfile,insertimage,advimage,imagemanager,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,nonbreaking,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist",
theme_advanced_buttons2 : "blockquote,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,|,forecolor,backcolor,|,charmap,iespell,media,advhr",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,strikethrough",
theme_advanced_buttons4 : "styleselect,formatselect,fontselect,fontsizeselect,|,undo,redo,|,spellchecker",
theme_advanced_toolbar_location : "external",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
relative_urls : true,
document_base_url : "http://xxxxxxxxxxx.com/",
auto_resize : true,
content_css : "/custom/css/style.css",
extended_valid_elements : "iframe[height|width|src|frameborder|scrolling]",
});
/*
The following code comes from- http://tinymce.moxiecode.com/punbb/viewtopic.php?id=12966
Without it the editor only loads 10% of the time. With it, it's pretty much 100% consistent.
The other changes mentioned in the post have also been implemented.
*/
var setupTiny = function()
{
var ifrObj = document.getElementById('pageEditIFrame');
var win = ifrObj;
if (win.contentWindow)
{
win = win.contentWindow;
}
var d;
if(ifrObj.contentDocument)
{
d = ifrObj.contentDocument;
}
else if (ifrObj.contentWindow)
{
d = ifrObj.contentWindow.document;
}
else if (ifrObj.document)
{
d = ifrObj.document;
}
textAreas.each(function(txtEl)
{
tinyMCE.execCommand('mceAddFrameControl', false,
{
element_id : txtEl,
window : win,
doc : d
});
});
};
//Waiting 1 second seems to make the editor load more reliably.
setTimeout("setupTiny();",1000);
I ran across a similar issue that only shows up in more recent versions of Firefox - Chrome and IE work fine for me. Not sure if it is exactly the same problem (I'm not using iframes) but it presents in the same way.
Here's where I found my solution:
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=23302
As you can read there, one of the coders for TinyMCE thinks its a bug in FF, though the fixes look more like it's tiny_mce assuming a bug still exists in Firefox that was fixed at some point in 3.5. Here's the solution that worked for me (quoted from the post):
1)
Go to tiny_mce.js
2)
Find this line: this.isGecko = ua.indexOf('Gecko') != -1;
under it add:
this.isGecko369 = (this.isGecko && ua.indexOf('irefox/3.6.')!= -1 && parseInt(ua.substr(ua.indexOf('irefox/3.6.')+11,2)) >= 9);
this.isGecko369 = (this.isGecko369 || (this.isGecko && ua.indexOf('irefox/3.5.')!= -1 && parseInt(ua.substr(ua.indexOf('irefox/3.5.')+11,2)) >= 9 ) );
3)
Find this line: fixGeckoBaseHREFBug : function(m, e, h) {
below that there is this line: if (tinyMCE.isGecko) {
alter it with: if (tinyMCE.isGecko && !tinyMCE.isGecko369) {