I am using FancyBox to display image gallery. I want, When page open all images shows as thumb after click any image show this image full screen, slide show etc.
my CI view code as below
<div class="container">
<div class="gallery">
<?php
foreach ($records as $rec){
echo "<a href=".base_url()."upload/images/".$rec["file_name"]." data-fancybox="group">";
echo "<img src=".base_url()."upload/images/thumb/".$rec["file_name"].">";
echo "</a>";
} ?>
CI Module Code below:
public function get_data_gallery($table){
$query = $this->db->get($table);
return $query->result_array();
}
CI controller code as below:
public function gallery(){
$data['records'] = $this->ciweb_model->get_data_gallery('images');
$this->load->view('common/header');
$this->load->view('common/menu');
$this->load->view('gallery',$data);
$this->load->view('common/footer');
}
And my Error is below:
A PHP Error was encountered
Severity: Parsing Error
Message: syntax error, unexpected 'group' (T_STRING), expecting ',' or ';'
Filename: views/gallery.php
Line Number: 32
Backtrace:
My guess is that the problem is here:
.. data-fancybox="group">";
you have mixed "'s, it should be
.. data-fancybox='group'>";
Related
Using IE I have automated a site but now after everything, I got stuck with a form which throws a dialogue box "Message from Webpage" Ok or Cancel.
Dialogue Box Image
Brower's HTML inscpect :
<div class="formbuttons">
<input name="Deactivate" class="formsubmit deactivate" id="ButtonDeactivate"
style="width: 160px;" onclick="return confirm('Are you sure you want to
deactivate the feature?');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(
"ctl00$ContentPlaceBody$ButtonDeactivate","", true, "
", "", false, false))" type="submit" value="Deactivate">
</div>
The methods I have tried :
1. By removing the onclick from html but it didn't help though regular expression is actually removing it
[String] $body = "onclick=.*feature....."
$ie.Document.body.innerHTML -replace "$body", ""
$deactivate=$ie.document.getElementById("ButtonDeactivate")
$deactivate.Click();
2. By adding few statements as mentioned here (Automating IE confirmation prompt with Powershell)
$ie.document.forms | Select -First 1 | % { $_.submit() }
My only motive is to click on the OK popup button.
Thanks for the help in advance.
Try to query the Outer HTML property of the item to get the HTML code. Then all you have to do is replace the "confirm (*)" with "". After that you can set it back into the script and then click it.
$Script = $IE.document.getElementsByTagName("script").item(#----------Whatever Number it is)
$Script.outerHTML = $Script.outerHTML | % {if ($_ -like "return confirm*") {"return true;"} else {$_}}
$autotransbtn.Click()
Reference:
(1) Automating JavaScript confirmation prompt in IE using PowerShell
(2) internet explorer - Automating IE confirmation prompt with Powershell
I'm using the https://github.com/blueimp/jQuery-File-Upload script and until now I was able to dynamicly update my bootstrap progresse-bar with the following jQuery-File-Upload snippet:
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
console.log("progress: " + progress);
},
The html for this progress-bar looks like:
<div id="progress" class="progress progress-striped">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>
But now this progress-bar don't get filled, it always remains at 0%. I added that console.log above to debug this and in the console everything looks good. I get all the "progress: 1" and so on messages.
So why the progressbar div doesn't get updated anymore?
Thanks
**update: Had to change the jquery line to
$('#progress .progress-bar').css('width', progress + '%').attr('aria-valuenow', progress);
I am facing a strange error while adding the facebook comment plugin in my AngularJS app.
The simplified structure of the app page is
<html ng-app="myapp">
<head>
...
</head>
<body>
<div>
...
</div>
<div ng-view></div>
...
</body>
</html>
The page with fb comment box is loaded in ng-view. The structure of page that contains fb comment box is as follows
<div id="fb-comment-box>
<div class="fb-comments" data-href="http://mydomain.com/page/{{ page.id }}" data-numposts="5" data-colorsheme="light"></div>
</div>
The page is angularjs scope variable which comes from controller. When i load this page in browser and do inspect element. It shows the correct page id i.e. data-href is
data-href = "http://mydomain.com/page/2"
But below the fb comment box, Facebook shows following error
Warning: http://mydomain.com/page/%7B%7B%20page.id%7D%7D is
unreachable.
I can see the angularJS scope variable is not binding. Does anyone know how to solve this issue?
This is probably due to the fact that the FB functionality kicks in before Angular is able to change the data-href attribute.
A directive seems like a good choice here:
You basically need to create the comment-box after Angular can provide the correct URL.
Because this involves asynchronous DOM manipulation, you need to use FB.XFBML.parse() to let FB process the comment-box once the data-href attribute is changed.
The directive:
.directive('dynFbCommentBox', function () {
function createHTML(href, numposts, colorscheme) {
return '<div class="fb-comments" ' +
'data-href="' + href + '" ' +
'data-numposts="' + numposts + '" ' +
'data-colorsheme="' + colorscheme + '">' +
'</div>';
}
return {
restrict: 'A',
scope: {},
link: function postLink(scope, elem, attrs) {
attrs.$observe('pageHref', function (newValue) {
var href = newValue;
var numposts = attrs.numposts || 5;
var colorscheme = attrs.colorscheme || 'light';
elem.html(createHTML(href, numposts, colorscheme));
FB.XFBML.parse(elem[0]);
});
}
};
});
The HTML:
<div id="fb-comment-box" dyn-fb-comment-box
page-href="https://example.com/page/{{page.id}}"
numposts="5"
colorscheme="light">
</div>
NOTE:
The directive's scope will constantly watch for changes in the page-href attribute and update the comment-box. You can change this to suit your needs (e.g. also watch for changes in the other attributes or bind it once and stop watching).
See, also, this short demo.
I am using Zend framework version 1.11.3 and jQuery mobile version 1.3.0 beta. On clicking the log out button I am redirected to the main page. The page does not get refreshed and the images are not loaded. However when I refresh the page the images get loaded. Here is my log out code ::Controller:
$auth = Zend_Auth::getInstance();
$auth->clearIdentity();
$user_sessions = new Zend_Session_Namespace('user_sessions');
$user_sessions->user_register_id="";
$user_sessions->user_fname="";
$user_sessions->user_username="";
unset($user_sessions);
return $this->_redirect('/index');
View:
<span class="ui-btn-right" >Welcome ' . $name . 'Logout
Any help will be appreciated. Thanks in advance.
I have changed my view as follows and found it working.
<span class="ui-btn-right" >Welcome ' . $name . '<div id="logout">Logout</div></span>
and added script
<script>
$( "#logout" ).on( "click", function() {
document.location.href="/logout";
});
</script>
This question already has answers here:
How can I upload files to a server using JSP/Servlet?
(14 answers)
Closed 2 years ago.
I am doing project Online Image Gallery, in which I have to upload images. I am doing it with jsp/servlet and IDE is Eclipse.
My Jsp file is as follows
<form action="ActionPage" >
<input type="file" name="myFile">
<br>
<input type="submit">
</form>
Here Actionpage is servlet. On Clicking submit button i want the selected file to be stored inside the folder called "IMAGE" inside the WebContent on server and path on database table.
If any one know the simple solution please share it.
Thanks in advance.
You can read how this is done here
How to upload files to server using JSP/Servlet?
PS: Storing uploaded files inside the applications directory is BAD BAD BAD idea. Think about what would happen if you have your application running for some time, and you want to do a redeploy becase a file is missing some html tag. The upload's directory will be removed by your container!
Try using a folder outside of the application's directory, or use a database.
This is the easiest solution if You are using jsp to develop your website
First of all for taking input from user make a html or jsp page and include tis code in your jsp/html page
First of all download
commons-fileupload-1.2.2.jar
org.apache.commons.io.jar
and add this jar to your library by right-clicking your project then select build path and then add jar files
`<form role="form" action="Upload.jsp" method="post"enctype="multipart/form-data">
<div class="btn btn-success btn-file">
<i class="fa fa-cloud-upload"></i>
Browse
<input type="file" name="file" />
</div>
<button type="submit" value="submit" name='submit'>submit</button>`
</form>
enctype="multipart/form-data"
it is necessary
Now make one jsp named upload.jsp( you can have the target jsp with which we are going to save our image to server of any name but remember to put that name in in above code
<%# page import="java.io.*,java.util.*, javax.servlet.*" %>
<%# page import="javax.servlet.http.*" %>
<%# page import="org.apache.commons.fileupload.*" %>
<%# page import="org.apache.commons.fileupload.disk.*" %>
<%# page import="org.apache.commons.fileupload.servlet.*" %>
<%# page import="org.apache.commons.io.output.*" %>
<%
String userName = (String) session.getAttribute("User");
File file ;
int maxFileSize = 5000000 * 1024;
int maxMemSize = 5000000 * 1024;
ServletContext context = pageContext.getServletContext();
String filePath = context.getInitParameter("file-upload");
// Verify the content type
String contentType = request.getContentType();
if ((contentType.indexOf("multipart/form-data") >= 0)) {
DiskFileItemFactory factory = new DiskFileItemFactory();
// maximum size that will be stored in memory
factory.setSizeThreshold(maxMemSize);
// Location to save data that is larger than maxMemSize.
factory.setRepository(new File("C:\\Users\\"));
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
// maximum file size to be uploaded.
upload.setSizeMax( maxFileSize );
try{
// Parse the request to get file items.
List<FileItem> fileItems = upload.parseRequest(request);
// Process the uploaded file items
Iterator i = fileItems.iterator();
while ( i.hasNext () )
{
FileItem fi = (FileItem)i.next();
if ( !fi.isFormField () )
{
// Get the uploaded file parameters
String fieldName = fi.getFieldName();
String fileName = fi.getName();
boolean isInMemory = fi.isInMemory();
long sizeInBytes = fi.getSize();
// Write the file
if( fileName.lastIndexOf("\\") >= 0 ){
file = new File( filePath +
fileName.substring( fileName.lastIndexOf("\\"))) ;
}else{
file = new File( filePath +
fileName.substring(fileName.lastIndexOf("\\")+1)) ;
}
fi.write( file ) ;
request.setAttribute("Success", "Successfully Uploaded");
RequestDispatcher rd = request.getRequestDispatcher("/UploadFiles.jsp");
rd.forward(request, response);
}
}
}catch(Exception ex) {
System.out.println(ex);
}
}else{
request.setAttribute("Error", "Error!!");
RequestDispatcher rd =request.getRequestDispatcher("/UploadFiles.jsp");
rd.forward(request, response);
}
%>
please don't get confused just copy this code and once you go through this i am sure you will get to know about code
Now the last thin you have to do is to add something to web.xml if you don't have this file then create this...
<context-param>
<description>Location to store uploaded file</description>
<param-name>file-upload</param-name>
<param-value>
C:\\Users\\
</param-value>
</context-param>
just add above code to web.xml you can change the address where your images will be uploaded as desired ( change param-value for this)
In case you face any problem let me know