Forum | Appery.io

Trying to make it possible that when I click an component I i taken into full screen gallery immediately and not to the image list here is the code i'm using

html: (i created a page with an html component and added this code to it)

<!-- <div data-role="page" id="index"
<div data-theme="b" data-role="header"
<h1Index page</h1
<

         <div data-role="content" 
             <ul class="gallery"            
  <li<a href="[url=http://www.photoswipe.com/latest/examples/images/full/001.jpg]http://www.photoswipe.com/latest/exam...[/url]" rel="external"<[img]a href=[/img]</a</li 
                 <li<a href="[url=http://www.photoswipe.com/latest/examples/images/full/002.jpg]http://www.photoswipe.com/latest/exam...[/url]" rel="external"<[img]a href=[/img]</a</li 
                 <li<a href="[url=http://www.photoswipe.com/latest/examples/images/full/003.jpg]http://www.photoswipe.com/latest/exam...[/url]" rel="external"<[img]a href=[/img]</a</li 
                 <li<a href="[url=http://www.photoswipe.com/latest/examples/images/full/004.jpg]http://www.photoswipe.com/latest/exam...[/url]" rel="external"<[img]a href=[/img]</a</li 
                 <li<a href="[url=http://www.photoswipe.com/latest/examples/images/full/005.jpg]http://www.photoswipe.com/latest/exam...[/url]" rel="external"<[img]a href=[/img]</a</li 
                 <li<a href="[url=http://www.photoswipe.com/latest/examples/images/full/006.jpg]http://www.photoswipe.com/latest/exam...[/url]" rel="external"<[img]a href=[/img]</a</li 
                 <li<a href="[url=http://www.photoswipe.com/latest/examples/images/full/007.jpg]http://www.photoswipe.com/latest/exam...[/url]" rel="external"<[img]a href=[/img]</a</li 
                 <li<a href="[url=http://www.photoswipe.com/latest/examples/images/full/008.jpg]http://www.photoswipe.com/latest/exam...[/url]" rel="external"<[img]a href=[/img]</a</li 
                 <li<a href="[url=http://www.photoswipe.com/latest/examples/images/full/009.jpg]http://www.photoswipe.com/latest/exam...[/url]" rel="external"<[img]a href=[/img]</a</li 
             </ul 
         < 
     <    -- 

js: ( I selected the page named dralion_frontline and on load ran this javascript)

$(document).on('pagebeforeshow', '#index', function(){
var myPhotoSwipe = $(".gallery li a").photoSwipe({
jQueryMobile: true,
loop: false,
enableMouseWheel: false,
enableKeyboard: false
});

 myPhotoSwipe.show(0);       

});

The page loads but doesn't work.... the images show up in a grid format and dont allow me to click on them or do anything... I want it to be able to go directly into fullscreen when I click on a component

Hi,

In your HTML code there is a gallery in comments. The JavaScript code is incorrect.

Please follow our tutorial: http://docs.appery.io/tutorials/addin... It's working properly.

I put it in comments to stop it from showing up here, the javascript code in the tutorial doesn't allow me to go straight into a full screen image

Could you please share the application with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a?

Shared the name of the app is YUMA

Hello! Please try the following code on page Load event:
prevar myPhotoSwipe = Appery("screenName")&#46;find("ul&#46;gallery a")&#46;photoSwipe({
jQueryMobile: true,
loop: false,
enableMouseWheel: false,
enableKeyboard: false
});
myPhotoSwipe&#46;show(0); /pre
also this post might help https://getsatisfaction.com/apperyio/...

Would I also be able to use local files vs calling a url?

Sure, you can use local files.

how would I go about doing this?

For example, if a file is on your memory card you can use "file://sdcard/XXXXX.jpg" to access it.