JQuery Bubble Popup: innerhtml hidden div - javascript

I'm using the JQuery Bubble Popup library, trying to show a hidden div in the innerHtml variable. Right now I have this:
<div class="button"> Show stuff </div>
<div class="information"> foo </div>
<div class="button"> Show stuff </div>
<div class="information"> bar </div>
<script>
$(document).ready(function(){
$('.information').hide();
$('.button').CreateBubblePopup({
position: 'bottom',
align: 'center',
width: '300',
innerHtml: $(this).next(".information").html(),
innerHtmlStyle: { color:'#000', 'text-align':'left', 'font-size':'110%' },
themeName: 'grey',
themePath: '/static/images/jquerybubblepopup-theme',
selectable: true,
});
});
</script>
The thing is, it isn't working as I expected, the problem is in the line
innerHtml: $(this).next(".information").html(),
Because if I put this it works:
innerHtml: 'testing jquery bubblepopup',

The problem with this line:
innerHtml: $(this).next(".information").html(),
is that this is not referring to what you think it refers to. I think you want it to refer to the current button being affected, but it doesn't - it's the this value that's in effect in the "ready" handler context.
What you can do (among several things) is use the ".each()" function:
$('.button').each(function() {
$(this).CreateBubblePopup({
position: 'bottom',
align: 'center',
width: '300',
innerHtml: $(this).next(".information").html(),
innerHtmlStyle: { color:'#000', 'text-align':'left', 'font-size':'110%' },
themeName: 'grey',
themePath: '/static/images/jquerybubblepopup-theme',
selectable: true
});
});
Also you've got a stray comma at the end of the bubble popup parameter object, which will get you an error from IE.

Related

How to prevent scrolling page up/ down when closing jQuery dialog?

I made a Shiny application and I'm using dialog (jQuery) for it.
The problem is that, when I close the dialog, the page goes to the top and I would like it to stay in the same position when I close the dialog.
The problem is that, when I close the dialog, the page goes up or down (as if it adjusted the screen position). I didn't want that to happen. I want the page to stay in the same position when I close the dialog.
When I open the dialog there are no problems, only when I close it.
My code:
<head>
<script src='https://code.jquery.com/ui/1.13.0/jquery-ui.js'></script>
<script>
$(function() {
$('#text1').hide();
$('#text1').dialog({
autoOpen: false
}, {
modal: true
}, {
title: 'Bird'
}, {
width: 50
}, {
resizable: false
}, {
show: 'explode',
hide: 'explode'
}, {
closeText: null
},
///background-color header
{
open: function() {
$('.ui-dialog-titlebar-close').hide();
}
}
).prev('.ui-dialog-titlebar').css({
'background-color': '#f8d40c',
'color': '#333333',
'text-align': 'center',
'display': 'block',
'margin': 'auto',
'border-radius': '5px',
'font-size': '25px'
});
///background-color body
$('#text1').css('background-color', '#e3d47f');
$('#click1').on('click', function() {
$('#text1').dialog('option', 'position', {
at: 'left top',
of: this // this refers to the cliked element
}).dialog('open');
return false;
});
$('body').on('click', '.ui-widget-overlay', function() {
$('#text1').dialog('close');
});
});
</script>
<style>
.class1 {
margin-bottom: 100px;
}
</style>
</head>
<body>
<p class='class1'>Point</p>
<p class='class1'>Point</p>
<p id="text1">Open dialog</p>
<p id="click1" class='class1' style='color:red'>Click here</p>
</body>
Shiny App is a SPA (Single Page Application).

Add custom html in outside the fancybox

$.fancybox({
content: '<button>prev</button><button>next</button>',
href: src,
'autoScale': false,
'transitoinIn': 'none',
'transitionOut': 'none',
.......
});
I simply open images in fancybox. I want to add some html button in fancybox but problem is that it is override the image. but I don't want to override the image so I want to add button outside the image.
Any help?
How about you try having z-index?
<style>
.btn1 {z-index: 5;}
</style>
<html>
...
<html>
<script>
$.fancybox({
content: '<button class="btn1">prev</button><button class="btn1">next</button>',
href: src,
'autoScale': false,
'transitoinIn': 'none',
'transitionOut': 'none',
.......
});
Or you can try having your buttons in the html and position it to absolute.

The requested content cannot be loaded-fancybox

I have radio button code below, when I clicked on that need to open fancybox modal window but while clicking it is saying 'the requested content cannot be loaded'.
$(document).ready(function(){
$("#cncstoreloc").fancybox({
target: this,
href: '#cnc',
width: 1080,
height: 400,
autoSize: false,
autoCenter: true,
scrolling: 'auto',
titleShow: false,
title: null,
centerOnScroll: true,
margin: 0,
padding: 30,
//type: 'iframe'
afterShow: function(){
$('#quicksearch').on('click', function(){
$('#cncstorepane').css('display','block');
});
},
afterClose: function(){
$('#radio_check').removeClass('radio_chk');
}
}).on("click", function (evt) {
$('#radio_check').addClass('radio_chk');
});
});
Radio button code:
<div class="" id="clickncollect_form">
<input type="radio" id="cncstoreloc" name="cncstoreloc">
<label for="cncstoreloc">Test</label>
<span id="radio_check" class="check"></span>
</div>
Content div to load in fancybox modal window:
<div style="display:none">
<div class="main-container" id="cnc">
<h1>CLICK & COLLECT</h1>
</div>
</div>
Does anyone have any idea instead of loading the content why it's throwing an error.

Showing specific anchors for each pictures of a lightbox in URL bar

I have a lightbox where each pictures has an anchor.
But the anchor doesn't show the specific ID for each pictures, it appears like this in the URL bar :
www.mywebsite.com/gallery.php#example/1
www.mywebsite.com/gallery.php#example/2
www.mywebsite.com/gallery.php#example/3
So, I wonder if it's possible to show in the URL bar the specific ID :
www.mywebsite.com/gallery.php#bird
www.mywebsite.com/gallery.php#dog
www.mywebsite.com/gallery.php#cat
Any ideas ? Thanks.
Html
<ul class="thumbnails" id="my-gallery">
<li class="span2">
<a href="images/full/example-bird.jpg" class="thumbnail" id="bird">
<img src="images/thumbs/example-bird.jpg">
</a>
</li>
<li class="span2">
<a href="images/full/example-dog.jpg" class="thumbnail" id="dog">
<img src="images/thumbs/example-dog.jpg">
</a>
</li>
<li class="span2">
<a href="images/full/example-cat.jpg" class="thumbnail" id="cat">
<img src="images/thumbs/example-cat.jpg">
</a>
</li>
</ul>
Script
$('#my-gallery li a').iLightBox({
skin: 'dark',
path: 'horizontal',
fullViewPort: 'fill',
infinite: true,
linkId: 'example',
overlay:{
opacity: 1,
blur: false
},
controls: {
thumbnail: false
},
styles: {
nextOffsetX: -45,
prevOffsetX: -45
}
});
It's difficult to suggest an appropriate solution since I can't test iLightBox.
Referring to the iLightBox website, you could use the callback provided:
$('#my-gallery li a').iLightBox({
skin: 'dark',
path: 'horizontal',
fullViewPort: 'fill',
infinite: true,
linkId: 'example',
callback: {
onShow:function(api) {
$(location).attr("hash",$(api.currentElement).attr("id"));
}
},
overlay:{
opacity: 1,
blur: false
},
controls: {
thumbnail: false
},
styles: {
nextOffsetX: -45,
prevOffsetX: -45
}
});
I highlighted the lines I inserted. My approach is using the callback for the onShow-event of the iLightBox for changing the Hash with jQuerys $(location).attr("hash","value");.
The problem is that I'm not sure if onShow is the correct event to hook into and if currentElement is in fact the anchor or not. This is something you have to find out yourself. I'm sorry.
Edit
I think if you're doing it my way, you have to remove that linkId from your parameters.
Edit
I tried something on the test page you linked above.
This code works fine for me if I paste it into the console:
$('#deeplinking_looping_gallery li a').iLightBox({
skin: 'metro-black',
path: 'horizontal',
fullViewPort: 'fill',
infinite: true,
overlay: {
opacity: 1,
blur: false
},
callback: {
onBeforeLoad:function(api) {
$(location).attr("hash",$("#deeplinking_looping_gallery li").eq(api.currentItem).children("a").data("caption"));
}
},
controls: {
thumbnail: false
},
styles: {
nextOffsetX: -45,
prevOffsetX: -45
}
});
Edit
Loading an image at page load should be possible with this line of code:
$("a[data-caption='" + $(location).attr("hash").substr(1) + "']").trigger("click");
It triggers the click event for the appropriate anchor (like if you click it with your mouse).

How can I use fancybox using onclick?

I am trying to make use of JQuery and Fancybox. This is how it should be used: http://fancy.klade.lv/howto
However, I can not generate many ids for "a href" and I do not want to make many instances of fancybox ready. So I want to be able to use one fancy box instance for many hyperlinks that do the same thing.
Whenever any of these links are clicked, the fancybox should popup for it. I thought I would use the onclick attribute for a "<a href" tag or any other tags, I can chnage this but how do I use the fancybox? I tried this but nothing came up:
Not Working?
Thanks for any help
Don't do it that way. If you can't generate unique IDs (or simply don't want to) you should be doing it with CSS classes instead:
<img src="image_thumbnail.jpg">
with:
$(function() {
$("a.fancy").fancybox({
'zoomSpeedIn': 300,
'zoomSpeedOut': 300,
'overlayShow': false
});
});
(from their usage page).
This demonstrates how to use fancybox (1.3.4) without requiring the <a href> link element by calling fancybox directly.
Inline:
<div id="menuitem" class="menuitems"></div>
<div style="display:none;">
<div id="dialogContent">
</div>
</div>
$('.menuitems').click(function() {
$.fancybox({
type: 'inline',
content: '#dialogContent'
});
});
Iframe:
<div id="menuitem" class="menuitems"></div>
$('.menuitems').click(function () {
$.fancybox({
type: 'iframe',
href: 'http://www.abc123.com'
});
});
HTML:
<a href="http://domain.com/bigimage.jpg" onclick="return fancybox(this);><img scr="http://domain.com/smallimage.jpg" /></a>
JSCode:
function fancybox(elem) {
elem = $(elem);
if (!elem.data("fancybox")) {
elem.data("fancybox", true);
elem.fancybox({
'overlayColor' : '#000',
'overlayOpacity' : 0.5
});
elem.fancybox().trigger('click');
}
return false;
}
IN CASE, you want to open contents of multiple divs within the page. i.e. part of the same page in fancybox, you can do it by following code:
open_fancy1
open_fancy2
<div style="display:none">
<div id="show-in-fancy1">
this content is shown in fancybox.
</div>
<div id="show-in-fancy2">
this content is shown in fancybox.
</div>
</div>
<script>
$(document).ready(function(){
$('.popup').fancybox({
'zoomSpeedIn': 300,
'zoomSpeedOut': 300,
'overlayShow': false
});
});
</script>
NOTE: Make sure that you have included fancybox.js
Ronald answer gave me string #dialogContent content in fancyBox v2.1.5. Try to use:
<div id="item"></div>
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#item").fancybox({
type: 'inline',
content: jQuery('#data').html()
});
});
</script>
$(".btn_fancybox_messagerie").on("click", function(event) {
//event.preventDefault();
var to = $(this).text();
$.fancybox.open({
type: 'iframe',
src: 'http://..../form-messagerie.php?to=' + to,
toolbar : false,
smallBtn : true,
iframe : {
preload : false,
scrolling: 'auto'
}
});
});
In fancybox 3 it can be done by using following code.
jQuery().fancybox({
selector : 'your selector'
});

Categories