I'm new to HTML and CSS. I want a simple, responsive slideshow of around five images that automatically rotate and have next and previous controls. Ideally I'd like to have a line of HTML text on top of the images (is this possible?).
Any ideas? I've seen mention of javascript and jQuery but don't have a clue what they are.
Thank you
Lightbox 2 is a good solution for you.
Just download the package and then add the js and css files as the website tells you. Then just put the images like:
image #2
image #3
image #4
It's quite easy and you don't have to manipulate javascript or jquery.
Related
I'm trying to find a nice looking bootstrap slideshow that looks similar to this one: https://www.jssor.com/demos/simple-fade-slideshow.slider
I would use the one in the link but it's got way to much Javascript and doesn't respond properly when I change the size of my window. Any ideas how I could create this using Bootstrap, HTML and CSS only? So it still needs to be automatic as well.
Thank you
It’s the carousel you’re after, without knowing which version of bootstrap you’re on I cannot provide an example but you can find full examples for what you need in the bootstrap docs: https://getbootstrap.com/docs/4.1/components/carousel/
Warning: I'm a noob. The little I know comes from fiddling around.
I maintain a hobby website of images created in bootstrap 3 and I would like to have a responsive rollover image that also links to the full size image.
I have been able to complete the responsive rollover part, but I can't figure out how to add the link to display the full image.
Here's what I have so far:
https://jsfiddle.net/11cmcznn/
HTML:
<div class="rollover-wrapper-1"><div class="rollover-image-1"></div>
I can't post the CSS because I don't have reputation points yet.
Any help would be much appreciated.
Put href before the div and make sure you close the parent div too. Like this
<div class="rollover-wrapper-1"><div class="rollover-image-1"></div></div>
Well I've run into another problem. I have the rollover image working properly including linking to the full size image. But for some reason whenever I add the code to the webpage and the style sheet, somehow the webpage is looking for the style sheet in the wrong place on my website.
I have a style sheet "default.css" that I use for all my webpages. This css sheet is in the root of the website. But for some reason the webpage with the rollover image will not display the image, and when I inspect the element within Chrome it gives me 404 error stating that the default.css is not found in a certain folder on the website. I've never had the default.css in any folder besides the root.
So somehow the webpage is looking for a style sheet in a place where none exists, and I have no idea why.
If I copy the default.css style sheet from the root into the folder it's looking for then the webpage loads properly, but I don't want to have to maintain two identical style sheets. I just don't know how the style sheet got attached to the webpage.
I'm sorry for the vagueness of this problem, but I don't know enough to make a more informed question.
I m working on charts using the chart.js library. I want to show image gallery like a carousel on click of any segment of pie/doughnut chart. I'm not able to find the proper solution. Please suggest some solution
If I understand correctly what you are trying is to trigger an event after user clicks on chart segment. chart.js has this prototype method getElementAtEvent(); See the documentation.
It seems as a good place to start - you could create some function to open image gallery and call it there.
And the gallery/slider implementation is a separate issue, but if you are using some of the popular ui libraries some of them have a solution for that already. Bootstrap, for example has carousel, and JQuery has many plugins for that purpose. Here are some examples. Hope this helps...
I know how to implement a slideshow in the "Tictail-framework". That tag does fetch images from products and shows them in a slideshow. Is there any way of viewing only a few of these products? (like nr 3, 9 and 15) in Tictal? I'm asking here, because Tictail's support isn't the best I've seen.
I know how to achieve this by using an external js, but it seems like unneccesary if the native slideshow - tag can be used for this. Here is the documentation: https://tictail.com/docs/templates
You can get all images with
{{#all_images}}
<img src="{{url-500}}" alt="{{title}}">
{{/all_images}}
with JS you could push all those images into an array and output your selection.
Hey everyone, I would appreciate a pointing in the right direction with the problem I'm having. In short, I'm working on an application that will create PDFs using TinyMCE and ColdFusion 8. I have the ability to create a PDF by just entering in text, pictures, etc. However, I want to be able to import an html template and insert it into the TinyMCE .
Basically, I have a file directory code snippet that lets me browse through my 'HTMLTemplates' folder, and am able to select an HTML document. Now, I want to be able to take all the code from that selected HTML document and insert it into my TinyMCE box. Any tips on how I might do this, maybe?
Thanks!
If I understood you correctly, you already have a TinyMCE plugin which pops up a window and allows you to browse the certain directory using existing cfm page which you render within the popup window. Right?
If not, you should start with this. Not sure how easy it is done in current version, but in the older TinyMCE I've created the custom upload plugin (needed to track the site security permissions for current user) pretty quickly.
Next, I can see two quick ways to pass the server file contents to the client-side:
Make it available via HTTP so you can make the GET request and read contents into the variable.
Output it on the page using CF (say, on form submit when file selected) and grab using JavaScript.
I'd personally tried the second option. After you grab the text into the variable you can put it into the TinyMCE using it's API.
It can be as simple as output escaped text into the hidden div with known ID and read it using DOM operations (assuming that there is cfoutput around):
<div id="myTemplate">#HTMLEditFormat(myFileContents)#</div>
Also you can output the text directly into the JavaScript variable (of cource, with accurate escaping), maybe like this.
<script type="text/javascript">
var text = '#HTMLEditFormat(myFileContents)#';
</script>
Most advanced and possibly better for performance (and definitely "cooler") way is to use the concept of script tags as data containers, like this:
<script type="text/plain">
#HTMLEditFormat(myFileContents)#
</script>
Last time I've seen this in Nadel's blog, I think. Read it, pretty interesting.
Hope this helps.