Gist d75e8f2f712233fda719

100%

Gist d75e8f2f712233fda719

✓ Published0🌍 Public

Last edited Aug 30, 2014

Created on Aug 30, 2014

This example shows a TinyMCE popup dialog that inserts image tags into a document, built with jQuery and the tinyMCEPopup API. It displays a form for entering an image’s alt text and CSS class, then uses the `mceInsertContent` command to inject the generated `<img>` element into the editor. The code listens for clicks on file-browser buttons, constructs a `/media/` path from the button’s `data-forimage` attribute, and positions the dialog relative to the current scroll position. No data visualization is present; the example focuses on editor integration and DOM manipulation.

AI-generated description

Similar vizzes

Loading thumbnail…

Image popup

The example demonstrates a hover-triggered image popup using only HTML and CSS, showing a thumbnail of a lamb cupcake photograph that expands to reveal a title and description. The page displays a small image at 160 by 240 pixels, and upon hovering, the container widens to 250 pixels, adds a border and padding, and reveals the hidden heading and paragraph text. The code relies on the CSS `:hover` pseudo-class and the `display` property to toggle visibility, with no JavaScript libraries involved. The image is sourced from Flickr, and the effect is achieved entirely through static styling rules in the embedded `<style>` block.

DDylanFM

62% match

Loading thumbnail…

Gist af829df4a8453d0c38ef

A press-image grid displays articles with hidden text overlays that appear on hover. The SASS file defines `.press-image` blocks with absolute-positioned `.text-content` sections that transition from opacity 0 to 1 over 500 milliseconds using CSS transitions. Each overlay contains a table cell with justified text and vertically centered content, while the underlying image remains static. The layout uses inline-block positioning with 20-pixel margins, and the hover interaction relies solely on CSS `:hover` states without JavaScript libraries or external data sources.

Aandybak

59% match

Loading thumbnail…

final plugin code

This example shows a CKEditor plugin that adds a button labeled "Code Syntax Highlighting" to the editor toolbar, which triggers a custom dialog for generating code snippets. The plugin registers a command and dialog using the CKEDITOR API, and the button’s icon is loaded from the plugin’s image directory. It integrates with Backdrop and jQuery, wiring the command to the dialog so users can insert highlighted code through the editor interface.

Aalexfinnarn

58% match

Loading thumbnail…

Gist a5d9bcffd06abdeae2e9

This example shows a Django admin widget that combines a file browser with an upload field, rendered via the `custom_browse_and_upload_field.html` template. It displays a text input for a file path, a browse button that opens the FileBrowser popup, and a drag-and-drop upload area powered by qq.FileUploader. The widget supports image previews using the `filebrowser` versioning system, shows an error message if the referenced file no longer exists, and includes JavaScript to handle upload progress, success, and failure states with a configurable template for each upload item.

Aandybak

58% match

Loading thumbnail…

image

This example is a simple image-labeling tool that lets a user load an image into an HTML canvas, add a caption as text, and save the resulting composite as a PNG. The interface provides a file input for selecting an image, a text field for entering a caption, and buttons to apply the caption or open the saved PNG in a new window. The code uses the Canvas 2D API’s `drawImage` and `fillText` methods to render the image and text, and `toDataURL` to export the canvas content.

Aamundo

56% match

Loading thumbnail…

Gist 6442223

This example demonstrates a file upload interface with a progress bar, built using jQuery and the html5_upload plugin. The page allows multiple file selection, prompts for a server URL for each file, and displays upload progress with a blue progress bar. The CSS gives the page a cohesive blue gradient design with responsive layout adjustments for different screen sizes, including a playful rotation effect on images when clicked. The visualization highlights the interaction between custom JavaScript upload logic and dynamic CSS styling.

AAntonio24

56% match

Loading thumbnail…

Gist f8cae416cb69f9d2ae16

This example embeds a MailChimp newsletter signup form directly into an HTML page, using the standard MailChimp embed code with a slim stylesheet. The form collects an email address through a single input field and submits it to a specific mailing list via a POST action to the National Museums’ MailChimp account. It includes a hidden anti-bot field to filter spam submissions. The code relies on MailChimp’s embedded form markup and CSS, with no additional JavaScript libraries or custom data visualization.

Aandybak

55% match

Loading thumbnail…

Gist ebc2faf93afd564e97fa

This example uses D3.js to render a force-directed graph with a custom layout. The code applies CSS classes (`img.left`, `img.right`, `img.center`) to position images within the visualization, controlling padding, display, and alignment. The visualization shows how images are arranged relative to the graph nodes, with the CSS governing image placement while the D3 force simulation handles node positioning. The rendering approach combines HTML image elements with D3’s data-binding and update patterns, though the specific graph data source is not visible in the provided code.

Aandybak

55% match