I am having trouble viewing 3 different background-image .jpg files through one thumbnailFilePath in javascript. The HTML and CSS coding does recognize all of the files correctly, but the background images will not load into a browser. Therefore, you can not view these images. On the other hand, the browser does recognize to see the javascript videocaption text and the play_icon.png image files correctly.
// JavaScript Document
$(document).ready(function(){
$('a.videoLink').each(function(){
var thumbnailFilePath = 'video/'+$(this).attr('videofile')+'.jpg';
var videoCaption = $(this).attr('videocaption');
$(this).css('background-image','url('+thumbnailFilePath+')');
$(this).html('<div class="caption">'+videoCaption+'</div><img src="../images/play_icon.png" class="play"/>');
});
});
Maybe your video directory is not located in the same directory like your javascript file with this code? Otherwise use a additional slash in front of "video", if it is in the root:
var thumbnailFilePath = '/video/'+$(this).attr('videofile')+'.jpg';
What's the value of the following attribute?
.attr('videofile')
Did you give attention to the file extension? (maybe result is: myvideofile.mpg.jpg)
The answer is that my .jpg files must have the identical file name as my HTML source code. The videofile="bruce_waltke" must have the same .jpg name. So my .jpg file was named bruce waltke.jpg with no underscore in-between. So the .jpg was initially saved as bruce waltke.jpg but it is now saved as bruce_waltke.jpg....So the image file was broken but its now fixed.
Related
I have created a file as part of a script on a network drive and i am trying to make it hidden so that if the script is run again it should be able to see the file and act on the information contained within it but i am having trouble doing this. what i have so far is:
function doesRegisterExist(oFs, Date, newFolder) {
dbEcho("doesRegisterExist() triggered");
sExpectedRegisterFile = newFolder+"\\Register.txt"
if(oFs.FileExists(sExpectedRegisterFile)==false){
newFile = oFs.OpenTextFile(sExpectedRegisterFile,8,true)
newFile.close()
newReg = oFs.GetFile(sExpectedRegisterFile)
dbEcho(newReg.Attributes)
newReg.Attributes = newReg.Attributes+2
}
}
Windows Script Host does not actually produce an error here and the script runs throgh to competion. the only guides i have found online i have been attempting to translate from VBscript with limited success.
variables passed to this function are roughly declared as such
var oFs = new ActiveXObject("Scripting.FileSystemObject")
var Date = "29-12-2017"
var newFolder = "\\\\File-Server\\path\\to\\folder"
I know ActiveX is a dirty word to a lot of people and i should be shot for even thinking about using it but it really is a perfect fit for what i am trying to do.
Please help.
sExpectedRegisterFolder resolves to \\\\File-Server\\path\\to\\folder\\Register which is a folder and not a file.
I get an Error: file not found when I wrap the code into a try/catch block.
I tested the code on a text file as well, and there it works.
So you're either using the wrong method if you want to set the folder to hidden.
Or you forgot to include the path to the text if you want to change a file to hidden.
( Edit: Or if Register is the name of the file, add the filetype .txt ? )
If you change GetFile to GetFolder as described in https://msdn.microsoft.com/en-us/library/6tkce7xa(v=vs.84).aspx
the folder will get hidden correctly.
My ajax call is working on localhost but not when i upload the files in domain. Using ajax I am searching all jpg/png files in a folder called 'images' and showing them in my webpage. The code is -
<script>
//Use ajax to load all images (jpe?g|png|gif) from a folder to a page called Gallery
//images folder should be in the same folder as the file
var folder = "../images/";
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
// create 'img' element using JS and dynamically add image source and class
var imgSrc = document.createElement('img');
imgSrc.src= folder + val;
imgSrc.className = 'imageThumbnails';
$("#spanImage").append(imgSrc);
}
});
}
});
</script>
please change
var folder = "../images/";
to
var folder = "images/";
hope this helps.. cheers
Ok, so as you saw when you tried accessing the folder directly in your browser, your web server does not allow this, which is common on web servers. Very few people actually want visitors to be able to see a list of all files in a folder, for security reasons.
The quick and dirty way to do this would be to allow listing files in that folder, through a htaccess file, using Options +Indexes, but I strongly recommend you do not do that
Instead, I would suggest you place a file inside your images folder called index.php and have that file build you a list of files placed alongside it, in the images folder. That way you have control over which files you show and which ones you don't. The index.php file can return a simple text output, one file name per line or something like that. Then your ajax call should work as it used to.
Hope this helps!
I have a drupal form of type file, I want to use this form to upload a photo under the default/files/backgroudimage and than I get the uploaded file path and use it as a backgroud image for some javascript file. my question is I used both $file->uri and file_create_url($file->uri)
$file = file_load($form_state['values']['Background_image']);
// // Change status to permanent.
$file->status = FILE_STATUS_PERMANENT;
for the first $url1=$file->uri; gave me this result (relative path) public://backgroundimage/image.jpg
for the second $url2=file_create_url($file->uri); gave me full path:http://localhost:8080/SiteName/sites/default/files/backgroundimage/image.jpg
In my javascript I will get the path and use it to set a backgroud image:
document.getElementById('myElement').style.backgroundImage = 'url('+myUrl+')';
question is $myUrl how it supposed to be like? is it default/files/backgroundimage/image.jpg or public://backgroundimage/image.jpg ...?
your css should be in /sites/all/themes/xxx, so you can't access images from there by
/default/files/backgroundimage/image.jpg
public://background points to /sites/default/files/ if correctly configured but you can not use uri in js
you should use a document root relative path instead:
/sites/default/files/backgroundimage/image.jpg
So I have a folder in my assets/javascripts folder that runs an image slideshow called galleryview. Inside this folder is a themes directory holding images for my "next" and "previous" buttons thus...
assets/javascripts/galleryview/themes/
now the javascript running this, links to these images via this....
//Determine path between current page and filmstrip images
//Scan script tags and look for path to GalleryView plugin
$('script').each(function(i){
var s = $(this);
if(s.attr('src') && s.attr('src').match(/jquery\.galleryview/)){
img_path = s.attr('src').split('jquery.galleryview')[0]+'themes/';
}
});
HOWEVER, I'm using this in a Rails app now, so I need to point this img_path line to
assets/images/
so what should my imag_path look like now?
img_path = ?
Here is the entire javascript file code on jsfiddle....copy and past this into an editor and
the area I'm interested in is around line 389.
http://jsfiddle.net/thefonso/Sqmxa/
Not sure this code will exactly work, but I think you can use the image_path helper to get you close. Something like:
img_path = <%= image_path 'images/'%>;
Put this inside a .js.erb file and the ERB shown above should be parsed and output the string "/assets/images/", assigning img_path to the value "/assets/themes/"
Of course, you could also just do:
img_path = "/assets/images/";
...but the upside of using the helper, I guess, is in case that the "assets" path ever changes you won't need to update a hard-coded string.
I am trying to rewrite my code below to search a folder for all the images (they will be numbered but there maybe gaps, ie not 1.jpg,2.jpg,3.jpg but instead 1.jpg,15.jpg,60.jpg for this reason i would like to search the folder, put all the images into an array and then pick one randomly each time its looped.
Any help would be greatly appreciated.
Firstly i am currently specifying image total above the main script below:
imgWidth = 160,
imgHeight = 95,
imgTotal = 22,
total = 0,
tiles;
//create the HTML for the tiles and append that to the bg element
function makeTiles(count){
var html = '', imgNum;
while(count--){
imgNum = Math.floor(Math.random()*imgTotal + 1);
html += "<div class='tile' style='background:url(public/images/portfolio/all/"+imgNum+".jpg) 0 0 no-repeat;' ><img style='opacity:0; filter:alpha(opacity=0);' src='public/images/portfolio/all/"+imgNum+"-c.jpg' alt='' /></div>\r";
}
$bg.append(html);
}
You'll need to create a list of available images with something else than javascript, since it has no filesystem access, even though in the end, you are accessing the images via their url.
Workaround: enable some directory listing for the images, then access this page via javascript, parse the image files and construct an array out of them; but frankly, there are shorter and more robust ways to accomplish this ...
pseudocode ..
$ ls -1 *jpg > imagesfilelist.txt
$ cp imagefilelist.txt /some/publicly/accessible/folder
js/jquery ..
$.get("/some/publicly/accessible/folder/imagefilelist.txt", function(data){
alert("My image files: " + data);
});
...
javascript can not access local folders. point.
I repeat: there is no way you can "search folder" to get "array of images" in JS. You could do that part (server only!) in PHP or such server-side language and return results via AJAX.
To do what you want you need to know what the images are called. JavaScript cannot access folder directly as commented above. You would need to use a server side script to provide an array of the images for the JS to pick at random to do this.
Javascript will not be able to browse folders. What you need to do is to create an array of available images and then select a random one. You could do this using any server side technology (php, rails, java, .net ...).
The way you're trying to do it is a wrong one.But iwth a bit of tricks it could work though, but it's very wrong way to do this kind of things.
You can generate file list with php and feed it to your script. You can even create php script which will generate your script already populated with needed data but it's not the best to do this too.
So, the best ways are:
- create html with list of filenames/images(visible or invisible) by php, then manipulate it by javascript;
- create html and javascript wich will do AJAX query to php script which will return filename list(formated as JSON if you wish).
Why not upload your images to a free hosting site (like Flickr) grab the feed from your image group and select the random image from there?