I know there is a way to embed an autostarted looping slide show like this:
http://responsiveslides.com/
But let's say I want to add a new photo to the slide show. That means that I will have to go into the html code and add/delete code linking the image files. I want to just add pictures (could be to a local folder or a web site doesn't matter) and it updates the slide show with the new images. I know you can use flickr.com, but it does not have the autostart or looping features. Does anyone know of a way to do this?
enter code here
https://jsfiddle.net/jmwbLqxq/2/
Stole this from W3 obviously, except added the css to do the silky animation. All you have to do is add another img tag.
Edit:
In response to what you said, you would have to make a server side database and a 'upload images' button to add images to the database. When the screen loads, it runs your server side code that queries the database for the images, loops through them and inserts into html.
Related
I'm sorry for asking a simple question as I'm still learning html/css/js. What I want to do is to be able to click on this button that is a div class made from css and js, to load it's content without refreshing the page, which I believe requires ajax or jquery, but not sure how. Here is my github page danielroberto.github.io and the repo https://github.com/danielroberto/danielroberto.github.io so you can get an idea of what I mean. I basically want to click on any of the navigation buttons and then loads whatever content I want without redirecting to whole new html page. For example, when I want to click on the "photography" button, I want the button effect to happen while my images load on the bottom without redirecting to something like photography.html. Similar to clicking on the "design" button, I want it to transition and load my content.
There is a wealth of resources on the net to get the intro you need to AJAX - the technique of loading parts of a webpage instead of the whole thing.
You correctly suggest that you could use the jQuery JavaScript library to do this - there are lots of alternatives, but that's easy to learn, and is widely used on the net. Tried and tested!
Start here: http://www.w3schools.com/jquery/jquery_ajax_intro.asp
That would only be if you are planning to use some server-side technology to serve up your images.
If you are just going to manually set a list of images to show, and you want the buttons to cycle through these, then you're probably best just to build a carousel of some kind, using a jQuery carousel plugin, and include it all in your HTML markup from the beginning. Loads to choose from or get inspired by here: https://plugins.jquery.com/tag/carousel/.
Also, you should size your images to fit the screen you are serving them to. I recommend you look at using srcset. Your image on the test site was 4600px wide! Check this out: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I hope it goes well. The early days can be hard work but you'll soon get the hang of it.
You could store your content in a var in your js. Then when your button is clicked you can call the function which creates a text node or an element and append that to your div.
HTML
<button onClick="function()"></button>
<div id="show-data">
</div>
JS
var newText = 'Stuff here';
function function() {
var div;
div = document.getElementById('show-data');
div.appendChild(document.createTextNode(newText));
}
You can easily edit the html of an element when clicking a button using jQuery
HTML
<div class="my-button">click here</div>
<div class="my-content">init content</div>
JS
contentElement = $('.my-content');
$('.my-button').click(function() {
contentElement.html('new content');
});
https://jsfiddle.net/jaxon58/zp9mvu38/
i'm looking for a script or a way to preload images before the page become full load. What i found are script where i have to write the name and the root of the images, i need something that load like:
Load all img of the page, after show the page, during the loading of the images to show a preload image ( like loading or something like that ).
It's possible?
I have alrady tried the script on the web, but i found just script where i have to put the name of the images in a array... i don't need it!
I want that javascript load before ALL tag ( without i set the name of the images ) of the page and than show the page!
jquery has a plugin called imageready.
https://github.com/weblinc/jquery-imageready
Ive used it many times, it should work as you expect
Images will start being downloaded by your browser as soon as the DOM renders that part of your HTML. What you need to do is find a suitable animated gif very small size (few kilobytes) of a loading animation. Then have some javascript hide the image you want to show that is still getting downloaded by your browser. By using something like: Javascript callback for knowing when an image is loaded you will be able to check when an image has loaded, and the callback you can hide its associated gif and show the real image.
(I have limited coding experience)
I have a template file for a website and currently the image gallery for the site opens in a new page, I would like instead for the image gallery to not open additional pages/tabs and instead contain images in rows of five with one large main image under the rows all within the same page, I would like the main image when scrolled over with the mouse it zooms in on the picture Also when you click on the smaller additional images (in rows of five) it will change the main bigger image to the image that was clicked and allow the zoom in feature as well.
What are the tags I need to place in the template file (in the link below) and where do I put the tags?
Shown below is the current tags in the template
This is the picture gallery tags in the template file of the site:
<!-- picture gallery -->
<script type="text/javascript">myThumbs = ##CST_ITEM_IMAGE_ARRAY_T##;myPix = ##CST_ITEM_IMAGE_ARRAY_M##;</script>
Here is a link to the template file and a pdf of what I am trying to accomplish
http://sdrv.ms/UCHk8z
Here is what the current image gallery looks like now that needs to be changed to not open a new window
http://www.ebay.com/itm/4-Behringer-B208D-Active-800-Watt-2-Way-PA-Speaker-Systems-8-Woofer-/390478326914?pt=US_Pro_Audio_Speakers_Monitors&hash=item5aea526c82
I am not proficient with programming I understand some things but not how it all flows together, I only know basic links and tags so thank you everyone for your help, I greatly appreciate all the responses. I have been Google searching everything to no success.
According to my understanding of your question I think you require something like Thumbnail gallery , if so refer the below url
http://www.queness.com/post/3141/10-image-galleries-jquery-script-with-thumbnail-filmstrip
so I have choose one ( http://www.robertnyman.com/picture-slides/) to use for your purpose right so by that 80% of work is done just download the demo of that and is it will be easily understandable, in your case you can see 3 links in demos click on the one you like and download it and use it
so you have downloaded the file using the picture gallery link, so you will get a zip file which consists of gallery and _Macosx don't bother about the Macosx.
Now go into the gallery file in that there will be a index.html,css and required js, copy them where you require and if you see the index html there will be a div which consists of Picture slider container class div, complete the copy the div and paste it where you require.... Thats it :D
Note: Make sure you give the correct paths to the images, thumbnails, css and js
Hope this helps
If i look at Amazon Button to add items to lists on their site - you can see it here:
http://www.amazon.co.uk/wishlist/get-button
How does it work? I'm pretty sure it scrapes the page somehow but it seems to get every image whether its a flash image, jpg or anything, even when the site in question uses relative img src as opposed to absolute full site urls
Example page below, all images shown are jpg which is cool but all img src are relative meaning no "http://blah.com" before them
http://gadgets.guardianoffers.co.uk/p-788-Casio-Solar-Powered-Edifice-Watch.html
Is there a better way to get images other than parsing the html source?
Or are they just doing a million ifs if they don't get a hit straight away?
It looks like it parses the HTML of the page and looks for what is semantically identified as the primary image, name and price. For example, if you look at a page that doesn't have any ecommerce products, for example: http://www.theglobeandmail.com/ it takes the page h1 element as the product name and the primary image (front page story image) as the product image.
So behind the scenes they are doing a lot of guessing. Using HTML 5 semantic markup, you could establish a standard for this kind of thing, but unless everyone is using it, you are just making educated guesses.
I'm currently building a website with a js slider.
Basically all the pages of the site (slides in this case) are contained in one big html page.
These pages/slides are organized within <div> tags, like <div id="#slide1">, <div id="#slide2" >, etc
As you slide through the pages/slides, the url is updated, like www.mysite.com/#!slide1, then www.mysite.com/!#slide2, etc
Is it possible to tell the crawling bots that each div should be considered like a page ?
The slides are not loaded in ajax.
When you're serving your files with PHP or something like that you can try this:
create links for all slides which a earch engine could see (e.g. in a site map)
when a link is called deliver only the requested slide/content as HTML
store all other slides in JavaScript
before moving to another slide append the content
Extra advantage:
even without javascript activated a user could go through all the slides
Disadvantages:
when your slides contain a lot of content, javascript overhead could get heavy
it will work best if only one slide is visible at a time (or just append all slides "unload")
Maybe this is a possible idea.
To enhance your URLs you could also use the HTML5 history object, but this won't work in any Internet Explorer before IE10.