Article images viewer JQuery plugin

Plugin created for Irena web Studio collection in 2015 for news portal in Russian «Nautilus» in 2015.
Show article pictures (gallery replacement or addition).
Requirements: JQuery 1.10.1, 2.0.3 or later; browsers: IE (9 or later) / Chrome / Mozilla.
Correctly support up to 10 slides and items for each.
Open to development and customization. Free for personal use. Download here.

Implementation example:

  1. Append to page references to 2 required plugin files as:
    <link href="/Plugin/Magicpic/jq.magicpic-1.2.0.css"
        type="text/css" rel="stylesheet" />
    <script src="/Plugin/Magicpic/jq.magicpic-1.2.0.js">
  2. Create element div with id «magicpic»:
    <div id="magicpic">
  3. Put slides items into div as span elements with class «slide»:
    <div id="magicpic">
        <span class="slide"> ... </span>
        <span class="slide"> ... </span>
        <span class="slide"> ... </span>
  4. Create tag a with class «thumb» and put navigate Url instead symbol #:
    <span class="slide">
        <a class="thumb" href="#8 - Italy (2013)">
            //-- Follow code here --//
  5. Input image tag as small image and span element for float explanation text:
    <span class="slide">
        <a class="thumb" href="#8 - Italy (2013)">
            <img src="/Scenes/pict_008.jpg" />
            <span class="title">Padova</span>
  6. Find in file jq.magicpic-1.2.0.js line commented as TEMPORARY FOR DEVELOPMENT and remove follow command alert:
            + '; ' + $(this).find('span.title').text());
  7. Insert jQuery code for run plugin script on page loading:
    <script type="text/javascript">
        // On document ready
        $(document).ready(function () {
            // Magicpic viewer loading
            $('#magicpic').magicpic(3500, 180, 120);
            // or
    Note: 1st parameter 3500 (default is 5000) in «magicpic» method set slides swap timeout in milliseconds; 2nd parameter 180 (default is 0) set slide width in pixels; 3nd parameter 120 (default is 0) set slide height in pixels. When slides size not set, plugin autodefine and set width and height by first slide in collection.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet aliquet risus, ut gravida felis tincidunt a. Phasellus sit amet eros orci, eget imperdiet augue. Pellentesque tristique orci ac mi porta scelerisque scelerisque quam commodo. Integer consequat augue non magna vulputate vel aliquet augue egestas. Mauris in suscipit metus. Suspendisse at mauris mattis lorem egestas adipiscing. Donec vitae urna vel lorem ullamcorper ullamcorper. Nam dignissim dui nec arcu consequat a semper purus pretium. Maecenas a dui nisl. Sed tincidunt dui ac nibh fermentum eget gravida purus gravida. Nulla facilisi. Aliquam erat volutpat. Maecenas condimentum lectus eget urna accumsan fringilla. Cras nec lectus metus, at imperdiet ligula. Mauris lobortis interdum tincidunt. Mauris dapibus nec mauris eu semper. Pellentesque dapibus purus nunc, ac dignissim orci malesuada vitae.

Return to plugins list
Very easy implements on ASP.Net or MVC platforms. You can also customize this plugin.
We not recommend to change jQuery code, but you can change styles in CSS file or use additional CSS for overwrite styles.
Irena Warshavsky Studio ● Rishon Le-Zion, Israel ● (972-54) 520-45-65 ● ● ©2005-