Nishvault / Driftframe / Portfolio slider guide

Build a three-image portfolio slider with Driftframe

A short image sequence can show how a visual idea changes without turning a portfolio into a long gallery. This guide uses Driftframe, the free jQuery zoom slider and editor, to arrange three illustrations, write useful descriptions, and export a complete HTML presentation.

The example is a Studio Notes practice slider: three color variations of the supplied Studio Views artwork. These are original synthetic geometric illustrations, not photographs or customer projects. Use them to learn the controls, then substitute images you have permission to publish.

Choose a sequence before choosing motion

Open the slider editor. The filled example is ready to explore. If you already have custom work open, choose Save project before loading the Studio Views example: loading the example replaces the current slider.

For this exercise, keep the three images in their supplied order and use the following text. The captions describe the sequence; the image descriptions explain what is visible.

You can inspect the unchanged standalone Studio Views example to see the underlying artwork and controls. Its original captions differ from this practice sequence.

When starting your own sequence, Add images appends PNG, JPEG or WebP files in chooser order. It does not replace the sample. Remove unwanted sample slides deliberately, or keep them while trying the controls. A slider must retain at least one image. The editor accepts up to 12 images, 4 MiB and 24 million pixels per image, with a 32 MiB embedded project limit.

Apply the caption and settings for each slide

1. Set Slider title to “Studio Notes practice slider.” Choose Alternating zoom, 16:9 aspect ratio and a 5 second interval. Leave Autoplay on open unchecked.
2. Select image 1 using its numbered button. Enter its caption and image description from the table. Leave the optional slide link blank, then choose Apply settings.
3. Select image 2 and repeat, then select image 3 and repeat. Apply each slide’s changes before navigating away.
4. Try Move earlier on image 3, then Move later to restore the original order. These controls move the selected image together with its caption, description and link.

Apply settings commits the form. Save project and Export standalone HTML use the currently applied project. Typing a new caption and immediately exporting does not apply that edit. Check the displayed caption after applying, then save. If you use an optional caption link, enter an absolute HTTP or HTTPS URL and verify its destination; credentials and script URLs are rejected.

The supplied illustrations are 1600 × 1000. A 16:9 slider uses a different frame, so inspect edge details and text when choosing a crop. Switching to 4:3 or 1:1 changes the frame again. The plugin fills the frame with the image; it does not provide a manual crop-position editor.

Check the reader controls

Use Previous, Next or the numbered slide buttons to inspect all three captions. Focus the slider container itself and try Left/Right, Home/End and Space. Home and End jump to the first and last images; Space toggles playback when that container is the keyboard target.

With autoplay off, slides wait for a reader’s choice. The selected zoom effect can still run once during its interval. Play/Pause controls slide rotation; hover or keyboard focus pauses rotation and zoom while interacting. A hidden browser document pauses rotation. A single-image slider does not auto-rotate.

Reduced-motion support suppresses zoom and initial autoplay. A reader can deliberately choose Play afterward to rotate slides. These controls are useful starting points for an accessible presentation; they are not a certification of your finished page, physical touch devices or every browser engine. Test the actual page where you will place it.

Keep an editable backup and a shareable presentation

Choose Save project after applying your changes. The JSON contains every embedded image, caption, description, link, setting and selected position. To check the backup, reopen that downloaded JSON with Open project, visit each slide, and confirm the text and settings. Keep the original backup before experimenting with replacements or removals. Browser draft storage is a convenience, not your only copy.

Choose Export standalone HTML for the presentation. Open the downloaded file and try Next and End again. Its images, jQuery, slider code and styles are embedded in one HTML file; no external script, style, image or telemetry dependency is required. An optional caption link can still navigate when clicked. JSON and HTML carry the image and text content you chose, so review the complete files before sharing.

A standalone file is a complete document. A CMS may remove scripts pasted into an article field. Use a supported full-page upload or an allowed iframe workflow, or integrate the component through your site’s code. Check your host’s rules before choosing an approach.

Use the same sequence in a jQuery page

Download and extract the complete Driftframe package. Keep app/, vendor/ and samples/ together. Save the following as studio-notes.html at the extracted package root. Unlike the editor’s embedded project, a direct component integration can use local or site-hosted image paths. These three paths refer to the included artwork.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Studio Notes practice slider</title>
<link rel="stylesheet" href="app/driftframe.css">
<div id="portfolio"></div>
<script src="vendor/jquery-3.7.1.min.js"></script>
<script src="app/driftframe.js"></script>
<script>
jQuery('#portfolio').driftframe({
  title: 'Studio Notes practice slider', index: 0,
  effect: 'alternate', aspect: '16:9', interval: 5, autoplay: false,
  slides: [
    {image: 'samples/view-1.png', title: 'Explore a warm palette',
     alt: 'Fictional geometric studio illustration with a gold arch and sage shapes.', href: ''},
    {image: 'samples/view-2.png', title: 'Try a cooler contrast',
     alt: 'Fictional geometric studio illustration with a peach arch and dark teal shapes.', href: ''},
    {image: 'samples/view-3.png', title: 'Finish with earth tones',
     alt: 'Fictional geometric studio illustration with a cream arch and brown shapes.', href: ''}
  ]
});
</script>
</html>

The exact snippet was exercised with the current plugin and jQuery in a local DOM test, including three-slide navigation. The editor’s Apply and Save handlers and the generated standalone HTML were also checked locally. Those checks do not establish rendering in your browser or CMS. For methods, events, setup and the local-server fallback, see the included README; the two-component example demonstrates independent instances.

Know what you are sharing

The complete plugin and editor are free under the included use terms, which permit personal and commercial project use and finished outputs. They do not permit reselling or redistributing the full product package as a competing product. Keep the separate jQuery MIT notice. Image rights remain with their owners; guaranteed support and an update schedule are not included.

Downloaded studios and exported HTML contain no telemetry. The hosted product page and editor have bounded anonymous diagnostics that respect Do Not Track and Global Privacy Control and exclude project content and identifiers. Internal diagnostic events do not establish people, sales or search rankings.

Once the three captions, image descriptions, controls and reopened JSON match your intent, replace the practice artwork with your own small, coherent sequence. Open Driftframe to build it.