nicolafranchini / venobox Goto Github PK

Hey man,

Your Venobox rocks definitely, it fits perfectly with my design, I got just a problem and I can't figure it out.

When I click on a picture to open the venobox, there is an immediate scroll top and when I close it, the scroll down is done.

I try to disable this scroll top to stay at the same place on my page but impossible...

My div is with an overflow scroll for your information,

Hope to read you soon,

Thanks!

Is it possible to add support for swipe (left and right). This is the natural behaviour on mobile devices.
If not then how do I trigger next/previous slide via API?

Some photos taken from phone cameras especially have different orientation, and need to be rotated to be shown correctly. Browsers do this automatically by reading EXIF orientation data, but Venobox does not. I'm seeing an image upside down.

When opening inline content in Venobox, I'm getting an infinite loop on transitions.

When viewing the inline content on the page, there's no loop, everything functions as it should.
When the content is opened in Venobox, the button with a transition loops infinitely?

CSS:
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

I tried to find the source of the problem using Firebug, when I click on the button it brings up the styles, but for some reason when I try to edit the styles (ie. turn off styles), the styling disappears completely in Firebug and is replaced with: "This element has no style rules..." Must be something to do with whatever is forcing the loop.. as if it's resetting something so it's firing the hover again???

Thanks.

Hi there, I was just wondering if this works down to ie8? I'm just testing my site on ie9 and VenoBox seems broken.

Thanks :)

Is there a way to destroy Venobox once it has been initialized?

Hi,

so I got a strange fault. I have a site with some venobox links on it. Every time I reload the page (cmd + F5 in Firefox) the first venobox link I click will just show the progress wheel turning.
The resources will just get loaded up to "next.gif" and nothing happens, aside form the progress wheel.
That fault is strange because my colleague does not experience the same behavior when he accesses the same site.

Dear Developer
When i add this plugin in to my HTML theme it give me error, after lots of research i figure out that error is because of 2 Jquery files conflict one is my html theme file second is your plugin file please tell me any solution

I have a Play/Pause button to click to initiate VenoBox. After the initial page load you have to click the button twice to initiate VenoBox. On subsequent tries, you only have to click the button once.

Here's what I have:

jQuery(document).ready(function($){
     $('.venobox_custom').click(function(ev) {

     ev.preventDefault();

    /* custom settings */
    $('.venobox_custom').venobox({
         framewidth: '560px',
         frameheight: '315px',
    });
});

And the html is just:

<a class="venobox_custom playpause" data-type="youtube" href="https://youtu.be/9P6VU9DqVZo?rel=0&autoplay=1"></a>

Any ideas on how to trigger on 1 click?

Thanks!

Chrome 31.0.1650.63 m, Firefox 26.0 and IE 11, W8.

Question is: is it possible to automatically play video when video shows up in the venobox?

Hi there!

FIrstly, thank you so much for your plugin, it does the job :-)

I've implemented the 1.5.3 version today and I note a little problem on iPhone, see the screenshot :

As you can see, the picture is not centered vertically compared to the arrows.

Any idea to solve this?

Best

Hi.

Let me start by thank you guys for this excellent plugin! It's really awesome and easy to work with.

I have one suggestion to make:

• add a new attribute for youtube videos to support full screen mode ("allowfullscreen" flag)

By default the fullscreen button is hidden on the control bar... and it would be helpful to have an option to enable it.

I've hardcoded it on the script and as soon as possible I'll try to do it the "right way" and then contribute to this project.

Hi

i have downloaded VenoBox all was working well i setup a test image worked fine but as soon as i added another it all went wrong none of my images would open just the constant pre-loader and the YouTube videos just display a content not found and this ive tried with a few different videos with both long URL and short URL

is it just ,e or has anyone else had this issue?

Love the script - thanks a lot!

One issue I'm having is I have a HTML5 video background in one of the divs on the page.

When I close the lightbox (which is inline), it pauses the HTML5 video.

Any solutions?

Thanks!

It would be good if you could merge the PRs. Thank you.

This is pretty standard for lightbox functionality. Users should be able to hit the escape key on their keyboard to close an opened image.

As explained in the title, when It is closed the ajax modal it is called again the loadAjax() function and this should not happen.

Was the version buggy/dangerous-to-use or something? I'm working on a project that included it via Bower, and it suddenly broke.

The lightbox accepts keyboard/nav events while the image is loading, which means if a resource is being loaded, it will be immediately interrupted and the next resource requested to be loaded right away.

This behavior is not optimal and can lead to problems. The ideal behavior in this case would be to lock the user interface (that is, disallow navigation) while the resources are loading, and once it has been fully loaded into the DOM, the UI can accept navigation events once again.

Due to time constraints I'm unable to integrate the suggested fix, but I'll be more active contributing once I finish the current project I'm working on. I like your library a lot!

Here's the basic idea for the UI locking:

var busy = false;
gallnav.left = function(e) {
  if (busy) return false; else busy = true;
  // ... Do stuff ...
  loadResource(function() {
    busy = false;
  });
}

You have a busy variable inside the closure, which you can use to allow or disallow the method from running if it's busy. Once you finish loading the UI (which could be waiting for a resource to load, or just manipulating the DOM) you can unlock the UI by setting busy to false.

This ensures nothing is done until the UI is ready to accept more events.

how to use custom close button with in modal box.

Ran into this when testing for ADA compliance. Here's my quick fix. I'm sure you can improve.

$('.venobox').venobox().click(function() {
focusclick = this;
$('.vbox-close').click(function() {
setTimeout("focusclick.focus()",500);
});
});

Hi,

I'am working with Contao openSource CMS which has an composer extension, I would really apreciate if I could install your plugin via composer.

Very nice lightbox! I'd like an option that would ignore clicks to the modal overlay and instead only close when clicking the "x".

Thanks,

Hello. Can we call on another slide within a slide?

Thanks.

Hi!

First of all I want to say thank you for such a nice work. The question is - is there any way to make lightbox fullscreen with iFrame (100% height)?

Hi,
Great script. Just wondering how to show a caption that goes with the image?
I am using the script in a Wordpress setup with Advanced Custom Fields. It works great, but I don't know how I should be able to display a caption.

This is my PHP function:
$thumbs = get_sub_field('thumbnail_gallery'); if( $thumbs ): ?> <div class="veno-container"> <div class="veno-thumbs"> <?php foreach( $thumbs as $image ): $caption = $image['caption']; ?> <a class="venobox" data-gall="myGallery" href="<?php echo $image['sizes']['large']; ?>"><img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $caption; ?>" /></a> <?php endforeach; ?> </div> </div> <?php endif;

and my js:
$('.venobox').venobox({ titleattr: 'alt' });

Can i add Self hosted Video!!!

I like the script. Maybe you like this feature.

I have succesfully used a cookiescript on an other custom popup.
The popup opens automaticly on previewing the page.
Then set a timeout of x minutes and the popup doesn't show anymore.

All I did is used these scripts:

(cookie-wrap-popup needs to be an other class*) :
https://gist.github.com/fourroses666/243d04e351b26465e886

Grabbed form https://github.com/carhartl/jquery-cookie :
https://gist.github.com/fourroses666/502fc4a40b5f5a6d4e2c

I'm not a coder so leave it up to you.

The problem appears only when you open up a modal with

data-type="ajax"

After the modal is closed, only in this situation the page is scrolled to the top. In the other scenarios, the page is not scrolled and this should be the correct behaviour.

HI, venobox is great - but for my reason i need to save values from input fields, inside a inline div showing inside a venobox.
Get no value ( input id="newlastname" type="text" ) with jQuery $('#newlastname').val(), when i change the Value in the Form. When there is a fixed value (input id="newlastname" type="text" value="smith") i get always this value, also when i change it at the form.

Any ideas ?

Thanks a lot !
Best Regards, Marcel

Is it possible to add a slide transition in addition to fade?

There is a problem when loading a content into Venobox using AJAX. If there is an image in the content to be loaded, it will often cause the plugin to add wrong margins (top + bottom) to the container (.vbox-content).

I thought for a while and the reason is simple: if the content is short enough to fit in the viewport, the plugin calculates margins that must be added to the .vbox-content element, so it's centered vertically. The problem is, that all this math takes places before the image is loaded, so it appears after Venobox is opened. But the margins stay the same, resulting in a huge spacing from the top and bottom.

Workaround could be making sure that images you put in there are always the same size, so you could give the img element width and (most importantly) height. Then they would take up the required size even before loaded.

The better way to fix this would be to make the layout use display: table (on parent) and then children (with the content) to use

display: table-cell;
vertical-align: middle;

This would need a lot of work I guess.

The URL is not always provided as http://www.youtu.be/your_video_id so the recent function loadYoutube will fail.

I updated the code so that also links like https://www.youtube.com/watch?v=cgmjGIQ-G3c will be accepted.

#68

Hello, I have VenoBox installed on my company's development website. I'm using it to show off a gallery of videos from an event that one of our people spoke at.
The issue I am having is that when you view the site on a mobile device and click on one of the thumbnails, it brings you to a white screen with nothing on it. If you tap the white screen, the video will start to play, but I'm wondering why the video doesn't automatically show up and play when you click on the link.

Thanks.

Hi,
Is it possible to make initialization after opening venobox with data-type="ajax", where gallery is loaded and I want make a separate previews of images in another instance of Venobox ?
But when I close image preview, venobox with ajax still displaying content of gallery.

YouTube video list would be an awesome addition to the plugin. Will try to fork VenoBox and do it.

When you have a page with iFrames, the wrappInner()-method on line 77 of venobox.js causes iFrames on the page to reload (since the whole DOM would be reloaded).

A better approach would be to replace wrapInner() with append(). This way, iFrames don't get reloaded. Also, the styling on line 14 of venobox.css would be better of if it's fixed. That way, when scrolling the overlay stays visible.

Dear sir

i am making ajax call

I try to load a div using venobox and inside this div I bound the element to click function as shown in fiddle

http://jsfiddle.net/mosta/gm9yf6vm/

if you click on "Delete" it will show alert but after loading venobox it does not work

Can you tell me how to solve this?
Thanks and appreciate your help
Mostafa

I am using Venobox on our website which is still under development. I am testing it on an iPad. When i click a link that opens the lightbox, the lightbox opens. I am opening a page that has a slider inside of it that displays some photos. When i swipe in the lightbox, Safari completely crashes. The screen goes blank and then safari quits.

I have tested the slider on different pages where i don't open it in a lightbox and the slider works fine.

Hi, Nicola,
Thank you for your excellent work!
I tried the plugin just now - it works like a charm :)
Would it be possible to add infinite gallery loop, as jumping between prev/next buttons is tiring sometimes.

Thanks
Iho

When navigating between images via the arrows (whether keyboard or visual), there's a bug that causes the min-height value that is dynamically set on div.vbox-overlay to change briefly such that a vertical scrollbar flashes on the right side of the window temporarily before disappearing again when the next/previous image loads.

When Infinigall is used on ungrouped images (images without a data-gall attribute), arrows do appear but clicking them causes the active image to hide yet no other images load (not even the same image). Either the arrows should not appear, or infinigall should activate all images linked without a data-gall value to a single collection and keep navigation enabled for the collection. And if there's only one item on the page, still hide the arrows.

If infinigall were to group the ungrouped images, I wouldn't need to dynamically group them before running the venoboxer like I'm doing below:

$('a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"]').attr('data-gall', 'gallery').venobox({
  bgcolor: '#000',
  numeratio: true,
  infinigall: true
});

Hi i have a page with many youtube testimonials : http://www.premierortho.com/testimonials.php
all the sudden i have noticed that when i click to view - it opens an iframe at the top of the page and so if you are at the bottom of the page and clicking to view, you don't see the iframe.

any ideas of how to fix??

hi,
i'd like to be able to close the venobox from jquery... is it possible?

i have an form in a venobox window which submits via ajax and i'd like to close the window once the form has been successfully submitted.

thanks

Is there a way for the box to close only and only IF I click on the X on the top right corner? If not, can this be implemented? :)

It seems like it's continually calling the ajax and reloading it

$('.venobox').venobox({
                framewidth: '90%',
                frameheight: '90%'
            });

adding the a tag through another JS

html += '<a class="venobox" data-type="ajax" href="' + ajaxurl + "?action=get_post_form&content_id=" + image.content_id + '"><div class="content_image" style="background-image:url(' + image.image_url + ')"  ></div>';