anyone know how to scan a folder using jquery or javascript code snippet, after that get a picture file name and embed in <li></li> or <div></div>, i've used php code to read through the folder and loop through the element to display the thumbnails and all, but it's not work well.
I've try on galleria, gallerific, galleryView jquery slideshow plugin but those might not work well with php processing because of predefined configuration or something, can anyone tweak or hack these gallery to dynamically read an image from a folder?
There is a way to read local files using javascript, but it requires the user to set up his browser appropriately. I know about such feature in Firefox. In your case, the best way would be to use PHP for folder scan and Lightbox for image display (which in turn has slideshow plugins).
Perhaps you'd be better of saying what didn't work well when you tried the PHP path and we can help you fix that?
Your best bet is probably going to either be an existing thing such as Gallery as powtac mentioned, or if you are only wanting to display images from a single folder that might be a bit of overkill.
You could use PHP to output the thumbnails and whatever other information you need into a list of <li> tags, use CSS to hide some of them (if required) and then use Lightbox or any of the many other JS image galleries available to do what you want.
Then you can ask on here if you are having trouble with one of those steps (detailing what you are doing, what's going wrong etc).
Related
I have am planning to use Colorbox the jquery lightbox plugin. I am just wondering as to what the best method would be to implement a 'add/upload image' option so it would be easy for a user to upload new images without having to go into the HTML markup and add an individual <img> line of code for each new image.
I am only currently knowledgeable with HTML and CSS at this current time. So if no one already has a snippet they could possibly provide me with, which language would be 'simpler' to learn for just for this specific task. Would it be PHP or Js or something different?
OR am I going about this completely wrong?
Of course they have to upload images to database. You need a suitable back end design. That means you need php to interact with database(or python will also do). If you need dummy upload procedures then you can easily do it with appendTo() method using jquery.
As you are using a plugin, then you will have a method to add an image to the webpage. It will be something like $("user-uploaded-image").plugin-name();
Where you want to upload the image?
Uploading an image means transferring the image to another location (server). For that you need a server side script that
Receives the image.
Saves the image to server hard disk.
php is a server side scripting language.
JS is client side language that is used to sending requests (in this case image ) to server.
Just google it for getting sample image upload scripts.
From taking a look around google for upload scripts suggested by #kiren Siva I came across quite a few CMS type plugins that give me the ability to do exactly what I need.
Some examples can be found here.
Thank you all for your help and suggestions.
Currently I'm working on a project in which user of website can design a giftwall by drag and drop of gifts. Drag, drop and sorting works perfect and I'm able to store generated giftwall into database. On recipient side system lists all the gift images in the same sequence sender sent so it visually looks like a giftwall. I want to allow users to store this giftwall into a single image so they can store their giftwalls into image album. In current system it lists all individual gifts into a individual div resided in main wrapper div. How can I export this wrapper div to image so it looks same as HTML. Any help will really be appreciated. Waiting for reply.
Thanks!
I don't know if there is a way by using pure javascript, but you can generate the image on your server and send it back.
I have never heard of saving browser's viewport to an image file via JS. I think it's only possible vie creating SVG or using HTML5 canvas.
I asked exactly the same thing a while back.
HTML div to screenshot?
The conclusion is... it is not possible with JS. Questionably possible from PHP also.
Use can use an online service for screen capture, like browsershots, but its not in real-time, and doesn't render everything well.
I used a workaround for my situation.
Recreated all the DOM/HTML elements which create the image (load parameters form database, and generate the DOM). Wrap everything in one container div, and zoom it out to the size you need.
I know, not the prettiest solution, but the only solution I could get to work.
Using <canvas> you can create image that will looks similar to how it looks on the page. Try it this way:
Get the size of wrapper <div> and create the same canvas element. Then get the position of each image in the div wrapper and draw that image on canvas at the same position with the same size.
Things may be harder if you need to draw additional controls, like button or textbox.
All modern desktop browsers suport <canvas> now.
You can either use html2canvas, which isn't perfect yet. Or store browser offsets of elements in div and then with GD or ImageMagick combine them into an image
Maybe this could be of use: http://html2canvas.hertzen.com/
I apologize for my english. Correct the title if it's necesary, please.
I want different pages of my web site to have different images in some background divs.
I'm using one CSS file for all the site.
For example, the supportingText div for the "about me" page has different image than "my project page".
Right now I use inside every pages (aboutMe.html, myProject.html) for any supportingText div a style attribute for this task.
And for example:
When I want to let surfers change entire web site style design I can change to a different CSS file of course.
But if my pages have some different images, as I explained before, should I change others html files to do it?
I know that probably there is a solution in some way like in php.
Consider that I don't know anything about php but if you explain in very easy way won't be a problem to understand!! ;)
Is there a solution in javascript?
I'm using only XHTML and CSS.
EDIT
Thank you!
You have been very kind.
I understood everything except one concept that I hope you can clarify.
I have many divs with background images, as:
title - myPicture - navigation - supportingText
All of those have a grey levels images.
I would like users can change aspect of the web site.
Something like three options:
black and white pages
green pages
orange pages
So in this case I need to set divs images in a JavaScript script into html file as your example!
So the CSS file only is helpfull for dimension and all other staffs but not anymore for images background? Is it?
Thank you a lot!
I agree with John in that you really shouldn't hardcode style attributes into the HTML. But if for whatever reason you have to you can easily change them using JavaScript.
document.getElementById('supportingText').style.backgroundImage = 'url("image.jpg")';
or if you're using jQuery
$('#supportingText').css('background-image', 'url("image.jpg")');
Update:
Assuming you're using a button to trigger the change, the code (which you would put in your HTML document) would look something like this:
<script type="text/javascript">
function changeBackground(divId, newImage) {
document.getElementById(divId).style.backgroundImage = 'url("' + newImage + '")';
}
</script>
<button onclick="changeBackground('supportingText', 'image.jpg');">Change Background</button>
Essentially what you're doing here is creating a button which calls a JavaScript function (changeBackground()), and you're passing in the ID of the div that you want to change, and the name of the image file that you want to change it to. You could have multiple buttons with different values in the 'supportingText' and 'image.jpg' parameters.
Answer to Part 2:
You can apply styles via CSS or JS (as above). However anything you do in JS will override your CSS. It's really up to you how you divide it up.
If you have hard coded your styles, even just some of them, into your HTML and you want these values to change when someone chooses a new stylesheet then you're in a tough position. Hardcoding those styles into your HTML makes your code inflexible and leaves you unable to make things such as switching stylesheets dynamically easy either with PHP or JavaScript.
Your best bet is to remove the hardcoded style rules from your HTML and place them into your stylesheet. Then switching the stylehseet can be done easily with PHP or JavaScript.
If you can't remove them then you'll need to write your own JavaScript to do this which will be tedious as it will need to dynamically alter each page when it loads. Not only will this probably take a long time to do and be error prone but it can hurt your website's performance if it isn't done well.
Basically, by hardcoding style rules into your HTML you've tied your own hands and have no good options available to you. I recommend removing the hardcoded styles and making sure you avoid doing it again in the future. Not only to avoid issues like this but to make your site faster by allowing your CSS to be cached.
i'm looking for a way to display a web page inside a div of other web page.
i can fetch the the webpage with CURL, but since it has an external stylesheet when i try to display it, it appears without all his style properties.
i remember facebook used this technique with shared links (you used to see the page that was linked with a facebook header)
did some unsuccessful jquery tests but I'm pretty much clueless about how to continue..
i know this can be done with frames but i always here that it's good practice to avoid frames so i'm a bit confused
any ideas how to work this out?
If you want to display the other website's contents exactly as they are rendered in that site then frames are, in this case, the best (easiest) way to go.
Facebook and Google both use this technique to display pages while maintaining their branding / navigation bar above the other site.
I am going to guess that Facebook still used an iFrame, just with no borders and a well placed header outside of it. The reason I am guessing that is because if the outside page has its own style sheet, there is a high probability that your styles and their styles will clash and not show things properly.
In order for the styles not to clash everything on both ends would have to be extremely detailed, not just generic styles applied to all paragraphs etc...
i agree that using frames would probably be the best solution for you problem.
but if you still want to avoid frames and put the contents into a div with the id externalConent, you could request the stylesheets the same way you get the other contents and prefix every rule in them with "#externalContent ". save these stylesheets to your server and include them in your page. with a few more customizations, that should work.
i have to admit this solution does sound quite strange... well, it is.
but it's the only way i see to do what you're asking for.
If you are unable to use a frame or iframe, try:
extract the HTML inside the BODY and inserting it into the destination DIV
extract the and sections at the header
Is not very clean though, but it will definitely work, you can insert a phpBB forum into another dynamic way using this technique, take a look at http://www.clearerimages.com/forum/ for an example.
So I made myself a little html/css template. And now I'm trying to actually use it with some PHP code however, it only renders text. The images and css arent there. Everything is in the templates/Default directory. Do i have to do something funky with my paths in the template?
Use firebug and see why the images don't show up. You need to activate the "NET" tab and then you see all the requests being made when your browser requests the page. My guess is that the paths to CSS and images are incorrect.
Wow, that's a weird question... :)
Just check what URLs the browser requests when looking for the stylesheets/images. I think you will have to adjust paths that you use in your smarty template.
Yes probably, sorry it is always a pain with linking images and css - seems simple, but isn't always!!!
Is there a space being create for where the images should be? If so, right click and see the path the image is calling in and make sure it is uploaded there.
Otherwise, use a tool like firebug (firefox plugin) to find out where the css and images are being called in, or just right click and 'view source of the page' then just make sure everything is being called in from the right place! If needs be, put direct urls for the images ie. www.mysite.com/templates/templatename/images/myimage.gif - just to make sure they are where you think they are!
good luck
you shoudl put your images in html/img
Then all image paths should start /img/