Loading files inside object tag - html5

Posted by Sharpcnet under HTML 5 on 7/24/2014 | Points: 10 | Views : 577 | Status : [Member] | Replies : 0
I'm loading different file types inside an <object> tag, one by one, by a button click. The file types are - html, img & pdf . The file names are stored in an array.

If there is an img file after the pdf , it does not load. Only html files load after the pdf will load.

Using AngularJs to perform the actions.

HTML:

<button ng-disabled="fileCount()" ng-click="showNextSlide()">Next</button>
<object class="objView" data="{{fileSource}}" type="{{fileType}}"></object>


JS:
var app = angular.module("feedboxApp", []);

app.controller("ctrl", function ($scope) {

$scope.fileSource = "";
$scope.fileType = "";
$scope.projectfiles = [
{ src: "page1.html", type: "text/html" },
{ src: "1.jpg", type: "image/jpeg" },
{ src: "page2.html", type: "text/html" },
{ src: "tracker.pdf", type: "application/pdf" },
{ src: "2.jpg", type: "image/jpeg" }
];

$scope.fileCount = function () {
return $scope.projectfiles.length > 1 ? false : true;
}

var i = 0;
$scope.showNextSlide = function () {
if (i + 1 >= $scope.projectfiles.length) {
i = 0;
}
else {
i = i + 1;
}
$scope.embedFile(i);
}

$scope.embedFile = function (i) {
$scope.fileSource = $scope.projectfiles[i].src;
$scope.fileType = $scope.projectfiles[i].type;
}

$scope.embedFile(0);
});


The page first loads with 'page1.html' as desired. On button click, it loads, 1.jpg' and so on till tracker.pdf. If I click on the button now, it does not load 2.jpg. When I see the html, it shows data="2.jpg" though.

If I put a html file instead of 2.jpg in the array, it loads fine on button click, after pdf.

Can the <object> not load an image file after it has a pdf file.




Responses

(No response found.)

Login to post response