I am creating an API in laravel. In which, I have to convert blade file into image and should return path of converted image or base64 in api.
I am using html2canvas.
routes are:
$router->POST('savecard', 'HomeController#SaveCard');
$router->get('save-capture/{image_for_save}', 'HomeController#savecapture');
I have to call savecard by POSTMAN and run some code and then I have a blade file template1.blade.php
My controller is:
public function SaveCard(Request $request)
{
$find_edittemplate_id = edittemplate::select('id')->where('user_id','=',$request->user_id)->first();
return view('template1');
}
public function savecapture($image_for_save)
{
$image = $image_for_save;
$image = explode(";", $image)[1];
// Remove base64 from left side of image data
// and get the remaining part
$image = explode(",", $image)[1];
// Replace all spaces with plus sign (helpful for larger images)
$image = str_replace(" ", "+", $image);
// Convert back from base64
$image = base64_decode($image);
$destinationPath = storage_path('uploads/');
file_put_contents($destinationPath,'temp.png',$image);
return response()->json(['CardSave' => $image, 'message' => 'Success'], 201);
}
After view template1 file, I created ajax call for convert image to template1.blade.php.
savecapture() will run on template1.blade.php by ajax
view is:
<!DOCTYPE html>
<html>
<head>
<title>Template One</title>
<link href="{{ url('css/style1.css') }}" rel="stylesheet" />
<link href="{{ url('css/font-awesome.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="../css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<div class="row" id="mydiv_screenshot">
<div class="col-md-12 col-sm-12">
<!-- Logo_Section -->
<div class="row text-center backgroundf0f0f0 pd20">
<div class="logo col-md-6 col-sm-8 col-sm-offset-2 col-md-offset-3">
<img src="{{ url('images/logo.png') }}" alt="Logo" width="100%" height="auto" max-height="130px"/>
</div>
<div class="col-md-12 col-sm-12 businessheadlineblack pdt5">
<h3>Digital Business Card</h3>
</div>
</div>
</div>
</div>
</body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</html>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script>
$(document).ready(function() {
window.scrollTo(0, 0);
html2canvas(document.getElementById("mydiv_screenshot")).then(function (canvas) {
var ajax = new XMLHttpRequest();
var image_data = canvas.toDataURL("image/jpeg", 0.9);
$.ajax({
url: '{{ url("save-capture") }}',
type: 'GET',
data: {"image_for_save": image_data},
success: function(response){
if(response != 0){
//console.log(response);
}else{
//console.log(response);
}
},
async: true
});
});
});
</script>
But It show in postman complete blade file and also not run ajax.
I have to convert blade file into image
Blade files are processed by Laravel on server. There is no direct way to convert them in images.
I have used htmlcanvas in core php. But I have no idea in laravel.
PHP doesn't have this functionality. HtmlCanvas is part of browser DOM. Unless you've used some custom PHP extension, what I think you did was creating the image on browser using javascript/canvas and then send it to the server (which is exactly the way to go with Laravel as well).
Related
I am trying to learn how to use an API in Laravel and show json results in my view. This is a sample code I have made but nothing is showing. The API is with values because when I try it in Postman, it returns json results.
<html>
<head>
<meta charset="utf-8">
<title>Item Manager</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<ul id="items" class="list-group">
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function (){
getItems();
function getItems(){
$.ajax({
url:'https://www.boredapi.com/api/activity'
}).done(function (items){
let output = '';
$.each(items, function (key, activity){
output += '<li class="list-group-item">' +
'<strong>${activity.text}</strong>${text.body}' +
'</li>'
});
});
}
});
</script>
</body>
</html>
I suspect it might have a problem with the key tags i am trying to call. I am trying to make the call from blade not needed from the controller.
json returned from the API:
{
"activity": "Write a list of things you are grateful for",
"type": "relaxation",
"participants": 1,
"price": 0,
"link": "",
"key": "2062010",
"accessibility": 0
}
Here is the completed code.
<html>
<head>
<meta charset="utf-8">
<title>Item Manager</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<ul id="items" class="list-group">
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function (){
getItems();
var output = '';
function getItems(){
$.ajax({
url:'https://www.boredapi.com/api/activity'
}).done(function (items){
let output = '';
$.each(items, function (key, activity){
output += '<li class="list-group-item">' +
'<strong>'+key+'</strong>' + activity +
'</li>'
});
$("#items").append(output);
});
}
});
</script>
</body>
</html>
try adding this:
$.ajax({
url:'https://www.boredapi.com/api/activity',
type: "GET",
},
Also console.log() your result might be helpful.
I have been finding ways to get this work but no luck.
i want to use typeahead autocomplete function.
main scripts on my app.blade
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
{{-- <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>--}}
then i have this script on my search blade
#extends('layouts.app')
#section('content')
<input class="typeahead form-control" name="query" type="search" placeholder="search" autocomplete="off"> </input>
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
}
});
</script>
#endsection
and then my search controller
public function autocomplete(Request $request)
{
$search_text = $request->input('query');
$data = Skills::select("name")
->where("name","LIKE","%{$search_text}%")
->get();
return response()->json($data);
}
all of these were done based on a tutorial all it works only when i remove the #extends('layouts.app') , line, or if i remove the "defer" in on app.blade file.
but when i do that all of my style layout is getting messed up. and is there a solution for this without removing existing code. because all existing codes are important.
try this in script
$('input.typeahead:search').typeahead({
I have a problem with the following Laravel function, the delete option does not work, it gives out a "Method not allowed" error, for some odd reason even if I give it an id to the route, it fails to show the entire page.
This is the view, admin.unsertable. I just want to correct the "delete" error
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" >
<!-- Font Awesome -->
<link href="{{ asset('fonts/font-awesome.min.css') }}" rel="stylesheet" type="text/css" >
<!-- Ionicons -->
<link href="{{ asset('fonts/ionicons.min.csss') }}" rel="stylesheet" type="text/css" >
<!-- Theme style -->
<link href="{{ asset('dist/css/AdminLTE.min.css') }}" rel="stylesheet" type="text/css" >
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="{{ asset('dist/css/skins/_all-skins.min.css') }}" rel="stylesheet" type="text/css" >
<!-- iCheck -->
<link href="{{ asset('plugins/iCheck/flat/blue.css') }}" rel="stylesheet" type="text/css" >
<!-- Morris chart -->
<link href="{{ asset('plugins/morris/morris.css') }}" rel="stylesheet" type="text/css" >
<!-- jvectormap -->
<link href="{{ asset('plugins/jvectormap/jquery-jvectormap-1.2.2.css') }}" rel="stylesheet" type="text/css" >
<!-- Date Picker -->
<link href="{{ asset('plugins/datepicker/datepicker3.css') }}" rel="stylesheet" type="text/css" >
<!-- Daterange picker -->
<link href="{{ asset('plugins/morris/morris.css') }}" rel="stylesheet" type="text/css" >
<link href="{{ asset('plugins/daterangepicker/daterangepicker-bs3.css') }}" rel="stylesheet" type="text/css" >
<!-- bootstrap wysihtml5 - text editor -->
<link href="{{ asset('public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css') }}" rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<body class="hold-transition skin-blue sidebar-mini">
<header class="main-header">
<!-- Logo -->
<a href="{{ route('admin.dashboard') }}" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Plu</b>SIS</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">Usuario</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<p>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="col-xs-4 text-center">
<!--Followers-->
</div>
<div class="col-xs-4 text-center">
<!-- Sales-->
</div>
<div class="col-xs-4 text-center">
<!-- Friends-->
</div>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
Perfil
</div>
<div class="pull-right">
Salir
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<i class="fa fa-gears"></i>
</li>
</ul>
</div>
</nav>
</header>
<body>
<div class="panel-body">
<div id="message">
</div>
<table class="table table-bordered table-striped" id="laravel_datatable">
<thead>
<tr>
<th>Email</th>
<th>Type</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
{{ csrf_field() }}
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- DataTables -->
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
fetch_data();
function fetch_data(){
$.ajax({
url:"/shoppingcart/public/admin/usertable/fetch_data",
dataType:"json",
success:function(data){
var html = '';
html += '<tr>';
html += '<td contenteditable id="email"></td>';
html += '<td contenteditable id="type"></td>';
html += '<td><button type="button" class="add" id ="add">Add</button></td></tr>'
for(var count=0; count < data.length; count++){
html += '<tr>';
html += '<td class="column_name" data-column_name="email" id ="'+data[count].id+'">'+data[count].email+'</td>';
html += '<td contenteditable class="column_name" data-column_name="type" id ="'+data[count].id+'">'+data[count].type+'</td>';
html += '<td><button type="button" class="btn btn-dange delete" id="'+data[count].id+'">Delete</button></td></tr>'
}
$('tbody').html(html);
}
})
}
var _token = $('input[type="_token"]').val();
$(document).on('click', '#add', function(){
var type = $('#type').text();
if(type != ''){
$.ajax({
url:"{{ route('admin.add_data') }}",
method:"POST",
data:{type:type},
success:function(data)
{
$('#message').html(data);
fetch_data();
}
});
}else{
$('#message').html("<div class='alert alert-danger'>Debes editar el campo</div>");
}
});
});
$(document).on('click', '.delete', function() { //No obtiene la página, da un error 419 al hacer POST por alguna razón
var id = $(this).attr("id");
if(confirm("Estas seguro de esto?"))
{
$.ajax({
url:"{{ route('admin.deleteuser') }}",
method:"POST",
data:{id:id},
success:function(data)
{
$('#message').html(data);
fetch_data();
}
})
}
});
</script>
</body>
Its controller is called AdminController, which runs the following method, which communicates with the database and deletes the row. The database is defined, because if it brings me the data with the method of fetch_data
public function deleteuser(Request $request){
if($request->ajax())
{
DB::table('users')->where('id', $request->id)->delete();
echo '<div class="alert alert-success">Data deleted</div>';
}
}
These are the routes
Route::get('/admin/usertable', 'AdminController#listuser')
->middleware('is_admin')
->name('admin.usertable');
Route::get('/admin/usertable/fetch_data', 'AdminController#fetch_data')
->middleware('is_admin')
->name('admin.usertable');
Route::delete('/admin/usertable/deleteuser/{id}', 'AdminController#deleteuser')
->middleware('is_admin')
->name('admin.deleteuser');
The ajax method is seted to POST, but Laravel route method is delete. You can to set a parameter named _method with value 'delete', also the crsf token on the headers and in a parameter named _token. In addition the Laravel route expects a parameter {id} in the uri, and you're not passing it.
If you have the csrf token i a metatag, like this:
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
you can get it from there
var token = $('meta[name="csrf-token"]').attr('content');
But, if you are in blade, you can directly use the csrf_token() helper
var token = '{{ csrf_token() }}';
Then, assign the token to the ajax headers:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': token,
'X-Requested-With': 'XMLHttpRequest',
}
});
Set a parameter named _method with value 'delete' and set a parameter named _token with the token value:
$(document).on('click', '.delete', function() {
var id = $(this).attr("id");
if(confirm("Estas seguro de esto?"))
{
$.ajax({
url:"{{ route('admin.deleteuser') }}",
method:"POST",
data:{
id:id,
// set a parameter named _method with value 'delete'
_method: 'delete',
// set a parameter named _token with the token value
_token: token
},
success:function(data) {
//...
}
})
}
});
Remove the {id} parameter from your laravel route, since you are not using it:
Route::delete('/admin/usertable/deleteuser', 'AdminController#deleteuser')
->middleware('is_admin')
->name('admin.deleteuser');
UPDATE
$(document).on('click', '.delete', function() {
var token = '{{ csrf_token() }}';
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': token,
'X-Requested-With': 'XMLHttpRequest',
}
});
var id = $(this).attr("id");
if(confirm("Estas seguro de esto?"))
{
$.ajax({
url:"{{ route('admin.deleteuser') }}",
method:"POST",
data:{
id:id,
_method: 'delete',
_token: token
},
success:function(data) {
//...
}
})
}
});
I have a file, which needs to have 90 modals with lots of long texts, because I need to create a modal when a link is clicked.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="inc/bootstrap.css" rel="stylesheet">
<script src="inc/jquery.min.js"></script>
<script src="inc/bootstrap.min.js"></script>
</head>
<body>
<script>
$(function(){
$('a').click(function(){
var link = $('#name').html(); // I need sent this to my calculator file
$.ajax({
url : "result.php",
type : "post",
dataType:"text",
data : {
name: link
},
success : function (a){
$('#result').html(a);
}
});
});
});
</script>
<div id="result"></div>
I need this text for php script
</body>
</html>
resuilt.php
/* I used PHP becase i need more functions, this only a example how
* to creat and call a modal after click on a link.
*/
function create_modal($modal_ID = 'myModal')
{
return "<div class='modal fade' id='$modal_ID' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>×</span><span class='sr-only'>Close</span></button>
<h4 class='modal-title' id='myModalLabel'>Nhãn</h4>
</div>
<div class='modal-body'>
Nội dung
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
<button type='button' class='btn btn-primary'>Save changes</button>
</div>
</div>
</div>
</div>";
}
echo create_modal();
?>
The result is, I need to click on the link two times to show my modal. But it can't close or does anything.
Where did it go wrong? And is there any way to make my idea better?
you can add
success : function (a){
$('#result').html(a);
$('#myModal').modal('show');
}
just add $('#myModal').modal('show'); when ajax load your modal in #result
I don't think 90 modals is a good idea.
Try saving data maybe in a databas.
Assign your links different ids.
Use jquery to listen to click events
Get data from your server
Populate modal with values from the server.
Check this stack overflow link.
Let me know if you need help
I am trying to implement photoswipe inside my jquerymobile application.
I am using jquerymobile & Django to develop my application and now I want to setup a gallery on one my pages.
Basically I have 3 pages, page 1 is the the category index, then I got a subcategory index for each category and finally I goto a detail item page.
On the itemPage I put the code to handle the photoswipe library however it doesn't work as I expected because the content of the page is loaded via ajax ( I have to do a full refresh in order to load the photoswipe scripts)
I know I can solve the issue, calling the subctageory level links with rel="external", but this cause a total refresh on Itempage and I want to keep the smooth transitions between pages.
So I need to know how to setup the code for photoswipe before page load.
The code below is from the itemPage level( I put the code from the photoswipe demo inside)
<!DOCTYPE html>
<html>
<head>
<title>PhotoSwipe</title>
<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
<link href="{{ STATIC_URL }}styles/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="{{ STATIC_URL }}styles/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{{ STATIC_URL }}scripts/lib/klass.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}scripts/code.photoswipe.jquery-3.0.4.min.js"></script>
</head>
<body>
<div data-role="page" id="Home">
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
<div data-role="header">
<h1>PhotoSwipe</h1>
</div>
<div data-role="content" >
<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>
<ul data-role="listview" data-inset="true">
<li>First Gallery</li>
</ul>
<p>PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery / jQuery mobile websites:</p>
<ul data-role="listview" data-inset="true">
<li>Code Computerlove</li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 Code Computerlove</h4>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page">
<div data-role="header">
<h1>First Gallery</h1>
</div>
<div data-role="content">
<ul class="gallery">
<li><img src="{{ STATIC_URL }}images/chichen1.jpg" alt="Image 001" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/002.jpg" alt="Image 002" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/003.jpg" alt="Image 003" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/004.jpg" alt="Image 004" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/005.jpg" alt="Image 005" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/006.jpg" alt="Image 006" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/007.jpg" alt="Image 007" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/008.jpg" alt="Image 008" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/009.jpg" alt="Image 009" /></li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 Code Computerlove</h4>
</div>
</div>
</div>
</body>
</html>
I put the script to handle the gallery inside <div data-role="page" id="Home">
since If I put the code in the head is never executed for the ajax call.
However when I executed the code above, the page doesn't show the last level(itempage never appears)
I guess the problem can be fixed changing ther way the page is loaded with some code like below inside <div data-role="page" id="Home">
$( document ).delegate("#Home", "pagebeforecreate", function() {
alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
});
but how I can call the photoswipe script, If I replaced the code from alert function with
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
it doesn't work? the page doesn't load
Hope you can help me!
Thanks
You should take a look at the examples provided by Photoswipe and how they are initializing photoswipe in their sample galleries.
I'm using this, which also ensures you can call more than one photoswipe-gallery on a multipage and also allows different HTML containers for the images. Feel free to modifiy to your need:
(function (window, $, PhotoSwipe) {
// still using live for photoswipe vs. on()/off()
$('div:jqmData(role="page")').live('pageshow', function (e) {
var currentPage = $(e.target),
options = {},
// allow multiple galleries
swipesOnPage = currentPage.find('.photoswipeable');
// no photoswipe, we're done
if (swipesOnPage.length == 0) {
return false;
}
// if there are swipes init each
swipesOnPage.each(function (i) {
// make sure swipe is initialized once in case events bubble
if ($(this).data('photoswipe') != 'init') {
$(this).data('photoswipe', 'init');
// init - make sure you add a class of swipeMe to your images!!
var photoSwipeInstance = $(this).find(":not('.cloned') a.swipeMe", e.target).photoSwipe(options, currentPage.attr('id'));
}
return true;
});
// un-init when leaving the page
}).live('pagehide', function (e) {
var currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
return true;
});
}(window, window.jQuery, window.Code.PhotoSwipe));
Add data-ajax="false" to the page calling the sub pages.
Similarly, add to index.html to link to portfolio.html.
If you have a slide show on home page add to link on portfolio.html for index.html as well.