You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 29-06-2013 17:36:28

snikookar
Contributors
Registered: 23-03-2013
Posts: 37

jQuery Image and Video Gallery Plugin

Hi,

I want to use a JQuary plugin (http://html5box.com/index.php) in one of my pages, but after adding it, the page does not work.

I put it in the Plugin folder, but I am not very familiar with PHP and Plugin folder as well.

Could you please help let me know how I can add this plugin in my pages?

Thanks.

Offline

#2 29-06-2013 18:05:37

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: jQuery Image and Video Gallery Plugin

Hi,

have you tried

<script type="text/javascript" src="../html5gallery/html5gallery.js"></script>

notice the ../ prior to the .js file

If that doesn't help, perhaps you can provide the code here.

- Pie

Offline

#3 29-06-2013 18:23:08

snikookar
Contributors
Registered: 23-03-2013
Posts: 37

Re: jQuery Image and Video Gallery Plugin

Hi Pie,

Yes, for instance you can see my code in welcome.php

<?php
$subNav = array(
    "Welcome ; welcome.php ; #509601;",
    "Accordions ; accordions.php ; #509601;",
    "Sidebars ; sidebars.php ; #509601;",
);

set_include_path("../");
include("inc/essentials.php");
?>
<script>
$mainNav.set("home") // this line colors the top button main nav with the text "home"
</script>

<head>
<script type="text/javascript" src="../html5gallery/html5gallery.js"></script>
</head>

<div style="display:none;" class="html5gallery" data-skin="light" data-width="120" data-

height="172">
<a href="1.jpg"><img src="1.jpg" alt="Trees"></a>
</div>

I can see the Navbar, but a blank page that's happen when there is an error in a page.

Last edited by snikookar (29-06-2013 18:24:43)

Offline

#4 29-06-2013 18:32:44

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: jQuery Image and Video Gallery Plugin

probably you don't need the ../

What's the error in the chrome console?

Offline

#5 29-06-2013 18:36:18

snikookar
Contributors
Registered: 23-03-2013
Posts: 37

Re: jQuery Image and Video Gallery Plugin

I checked and found the errors below:
Viewport target-densitydpi is not supported. :81/#!/url=welcome.php:7

Uncaught TypeError: Cannot call method 'addObject' of undefined

Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:81/html5gallery/skins/light/". jquery191.js:5

Offline

#6 29-06-2013 18:37:38

snikookar
Contributors
Registered: 23-03-2013
Posts: 37

Re: jQuery Image and Video Gallery Plugin

I also copy the jquery191 from your folder instead of jquery in the Jquery Plugin folder.

Offline

#7 29-06-2013 18:40:52

snikookar
Contributors
Registered: 23-03-2013
Posts: 37

Re: jQuery Image and Video Gallery Plugin

I test with original jquery file from that site, but it does not work again. I remove ../ and it does not work. I still receive the error below:
Viewport target-densitydpi is not supported. :81/#!/url=welcome.php:7
Uncaught TypeError: Cannot call method 'addObject' of undefined
Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:81/html5gallery/skins/light/". jquery191.js:5

Offline

#8 29-06-2013 19:18:28

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: jQuery Image and Video Gallery Plugin

Try accessing your page by going to the direct url to debug.

example: yoursite.com/pages/thepage.php

Offline

#9 29-06-2013 19:21:38

snikookar
Contributors
Registered: 23-03-2013
Posts: 37

Re: jQuery Image and Video Gallery Plugin

Hi Thomas,

Thank you for relaying to me.

I have test it with http://localhost:81/pages/welcome.php

It works fine!!!, but with http://localhost:81/#!/url=welcome.php I receive above errors.

Offline

#10 29-06-2013 19:32:34

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: jQuery Image and Video Gallery Plugin

Okay

-the ../ should not be needed
-don't include jquery on the page (because it's included in the template)

and test again on the normal url

Offline

#11 29-06-2013 19:41:14

snikookar
Contributors
Registered: 23-03-2013
Posts: 37

Re: jQuery Image and Video Gallery Plugin

Hi Thomas,

If I remove ../ from the source or remove the jquery file in the html5gallery folder near html5gallery.js.

I does not work. When I follow all of them, then with http://localhost:81/#!/url=welcome.php, I receive errors. But with http://localhost:81/pages/welcome.php, it works fine. It needs to have jquery.js near html5gallery.js. I think it does not follow jquery in the metroUI, but I cannot understand why?

The details of error are:
Viewport target-densitydpi is not supported. :81/#!/url=welcome.php:7
Uncaught TypeError: Cannot call method 'addObject' of undefined
(anonymous function)
b.extend.each jquery191.js:3
b.fn.b.each jquery191.js:3
c.fn.html5gallery
(anonymous function)
c jquery191.js:3
p.add jquery191.js:3
b.fn.b.ready jquery191.js:3
loadHtml5Gallery
(anonymous function)
(anonymous function)
(anonymous function) jquery191.js:3
b.extend.globalEval jquery191.js:3
b.ajaxSetup.converters.text script jquery191.js:5
Fn jquery191.js:5
k jquery191.js:5
r jquery191.js:5
send jquery191.js:5
b.extend.ajax jquery191.js:5
b.fn.extend.domManip jquery191.js:4
b.fn.extend.append jquery191.js:4
(anonymous function) jquery191.js:4
b.extend.access jquery191.js:3
b.fn.extend.html jquery191.js:4
(anonymous function) main.js:106
r.complete jquery191.js:5
c jquery191.js:3
p.fireWith jquery191.js:3
u jquery191.js:5
b.fx.tick jquery191.js:5
Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:81/html5gallery/skins/light/". jquery191.js:5
e.getComputedStyle.Wt jquery191.js:5
b.extend.css jquery191.js:5
nn jquery191.js:5
nr jquery191.js:5
er jquery191.js:5
a jquery191.js:5
b.extend.dequeue jquery191.js:3
(anonymous function) jquery191.js:3
b.extend.each jquery191.js:3
b.fn.b.each jquery191.js:3
b.fn.extend.queue jquery191.js:3
b.fn.extend.animate jquery191.js:5
b.fn.(anonymous function) jquery191.js:5
hideimagetoolbox
d.slideRun
d.init
d.initData
d
(anonymous function)
b.extend.each jquery191.js:3
b.fn.b.each jquery191.js:3
c.fn.html5gallery
(anonymous function)
c jquery191.js:3
p.add jquery191.js:3
b.fn.b.ready jquery191.js:3
loadHtml5Gallery
(anonymous function)
(anonymous function)
(anonymous function) jquery191.js:3
b.extend.globalEval jquery191.js:3
b.ajaxSetup.converters.text script jquery191.js:5
Fn jquery191.js:5
k jquery191.js:5
r jquery191.js:5
send jquery191.js:5
b.extend.ajax jquery191.js:5
b.fn.extend.domManip jquery191.js:4
b.fn.extend.append jquery191.js:4
(anonymous function) jquery191.js:4
b.extend.access jquery191.js:3
b.fn.extend.html jquery191.js:4
(anonymous function) main.js:106
r.complete jquery191.js:5
c jquery191.js:3
p.fireWith jquery191.js:3
u jquery191.js:5
b.fx.tick jquery191.js:5

Offline

#12 29-06-2013 19:42:33

snikookar
Contributors
Registered: 23-03-2013
Posts: 37

Re: jQuery Image and Video Gallery Plugin

the current source is:
<?php
$subNav = array(
    "Welcome ; welcome.php ; #509601;",
    "Accordions ; accordions.php ; #509601;",
    "Sidebars ; sidebars.php ; #509601;",
);
set_include_path("../");
include("inc/essentials.php");
?>
<script>
$mainNav.set("home") // this line colors the top button main nav with the text "home"
</script>
<head>
<script type="text/javascript" src="html5gallery/html5gallery.js"></script>
</head>

<div style="display:none;" class="html5gallery" data-skin="light" data-width="420" data-height="272">
<a href="../img/photos/1.jpg"><img src="../img/photos/1.jpg" alt="Trees"></a>
</div>

Offline

#13 29-06-2013 19:53:15

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: jQuery Image and Video Gallery Plugin

If you acces the page directly, jQuery isn't included. If you load it from the template url, jquery is already added. (so don't add it manually again)

But after some testing I found that the html5gallery uses an older version of jquery. So you'll need to include that version.

This works for me:


$subNav = array(
    "Welcome ; welcome.php ; #509601;",
    "Accordions ; accordions.php ; #509601;",
    "Sidebars ; sidebars.php ; #509601;",
);
set_include_path("../");
include("inc/essentials.php");
?>
<script>
$mainNav.set("home") // this line colors the top button main nav with the text "home"
</script>
<script type="text/javascript" src="html5gallery/jquery.js"></script>
<script type="text/javascript" src="html5gallery/html5gallery.js"></script>

<div style="display:none;" class="html5gallery" data-skin="light" data-width="420" data-height="272">
<a href="../img/photos/1.jpg"><img src="../img/photos/1.jpg" alt="Trees"></a>
</div>

Offline

#14 29-06-2013 20:32:50

snikookar
Contributors
Registered: 23-03-2013
Posts: 37

Re: jQuery Image and Video Gallery Plugin

Hi Thomas,

Many thanks. It works!  smile

Offline

#15 30-06-2013 16:31:38

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: jQuery Image and Video Gallery Plugin

Hi,

that's a great gallery!

However, i encountered one problem: I can't get it to fit on the mobile template.

I am using this in the page file:

<div style="display:none;" class="html5gallery" data-skin="vertical" data-width="680" data-height="400">

and tried this in the css:

.mobile .html5gallery {
	data-skin="vertical";
	data-width="300" data-height="200"; 
}

and this:

.mobile .html5gallery {
	data-skin: horizontal;
	data-width: 300;
	data-height: 200; 
}

No effect, neither on width, nor layout, wich should change to "horizontal"

The documentation for the gallery does not provide help for using a percentage-value, only fixed pixels. Tried "auto" and "100%". No joy. Any suggestions?

Another thing is, after leaving the gallery page back to the tiles groups, the mouse-scrolling does not work anymore.
Probably because of the jquery.js (v1.7.1). Is there a way to "unload" the file and get back to the originally used jquery.js or reinitialize it?

- Pie

Last edited by Pie (30-06-2013 18:11:37)

Offline

#16 30-06-2013 20:56:08

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: jQuery Image and Video Gallery Plugin

Pie wrote:

Another thing is, after leaving the gallery page back to the tiles groups, the mouse-scrolling does not work anymore.
Probably because of the jquery.js (v1.7.1). Is there a way to "unload" the file and get back to the originally used jquery.js or reinitialize it?

Damn, that's what I feared for. I'll check tomorrow.

But doesn't an iframe work better? I know iframes aren't perfect but most of the time they work nice.

And the data- propertys can't be set by css. They must be changed by javascript or when the page loads by php. I'd try to change them with javascript (most easy option) just before the script loads.

$(.html5gallery).data("width",300)

Offline

#17 30-06-2013 22:48:45

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: jQuery Image and Video Gallery Plugin

Hi,

thanks for the heads-up.

I have tried it like this in mobile.php:

<script>
$(document).ready(function(){
$(.html5gallery).data("width",300);
});
</script>   

But that is not doing the trick, since it will be overruled, when i call the page containing the slideshow, right?
Putting it into the page on load as above, wouldn't help either.

I would need to know how to only run this code on the mobile template. How would i check within a page, wether it's .mobile or not?

- Pie

Offline

#18 01-07-2013 15:11:10

snikookar
Contributors
Registered: 23-03-2013
Posts: 37

Re: jQuery Image and Video Gallery Plugin

Hi Pie,

I have this problem as well. I have sent an email to ask about JQ 1.9, because in their site they wrote the last version works based on 1.9. But when you check the JQ file, it is version 1.7.1.

Offline

#19 01-07-2013 15:22:45

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: jQuery Image and Video Gallery Plugin

Hi,

yeah, please keep us informed.

As far as i have tested it, the latest version it works with is v1.8.4.
It still causes the scroll-problem with that version, though.

- Pie

Offline

#20 23-03-2014 18:18:53

nut1903
Contributors
Registered: 20-03-2014
Posts: 11

Re: jQuery Image and Video Gallery Plugin

Hi,
i have identical problem and with that code i can't resolve.

I call the page direclty from tile
$tile[]=array("type"=>"simple","group"=>1,"x"=>0,"y"=>1,'width'=>2,'height'=>1,"background"=>"#544221","url"=>"../gallery/pages/page.php" ; page.php  have that code you suggest but it work only with direct link in localhost not with  url;

No error is disply : only empy page

I am not so familiar with tile

if u have suggestion...

thanks

Offline

#21 23-03-2014 19:58:46

nut1903
Contributors
Registered: 20-03-2014
Posts: 11

Re: jQuery Image and Video Gallery Plugin

I solved, the tree  was no correct

Offline

Board footer

Powered by FluxBB