Fork me on GitHub

Proper Usage of Zikula.ImageViewer.js  Bottom

  • I am trying to use the new Zikula Image Viewer javascript, but having some trouble. I used the add_additional_header tags to load prototype, effects, dragdrop and Zikula.ImageViewer. Then I added rel="imageviewer[gallery]" to the links of each image.

    The images do show up in a js popup box, but there are no border or navigational images shown. As you can see in the screenshot below, the image does indeed appear in the "popup" box. You can also see that the caption title is mixed with the other content of the page.

    http://screencast.com/t/NTc1MzkyZD

    Can someone tell me the proper way to load and use it?

    FWIW, I'd be happy to update the Wiki once we have this figured out and working properly. icon_cool



    Edited by wendell on Jun 15, 2010 - 12:08 PM.

    --
    Harness Technology
  • check out http://www.makthes.gr/index.php?name=Pages&func=display&pageid=4
    click on the images inside the article.

    all you have to do is add

    Code

    <!--[pnajaxheader imageviewer="true"]-->
    to your template and all required scripts are loaded automatically. icon_smile

    zikula version 1.2.3
  • Great. I want to use the Imageviewer in News as well. For display of images in News articles.

    --
    campertoday.nl, Module development, Dutch Zikula Community
  • tfotis

    all you have to do is add

    Code

    <!--[pnajaxheader imageviewer="true"]-->
    to your template and all required scripts are loaded automatically. icon_smile


    Yay! Works great! Thank you.

    --
    Harness Technology
  • Hmmm, now I'm not sure exactly where to put this in the Wiki...

    --
    Harness Technology
  • knowledgebase maybe ? Themes/Layout/Design somewhere there

    --
    campertoday.nl, Module development, Dutch Zikula Community
  • http://community.zik…iki&tag=ImageViewer



    Edited by wendell on Jun 17, 2010 - 08:51 AM.

    --
    Harness Technology
  • So now I'm wondering if there are any parameters we can use... such as, window size, scrollbars on/off, etc. Also, can you put pages in it? Would be nifty if you could click a link and open a page in that window, sort of like modalbox...

    --
    Harness Technology
  • I think that needs a much more featured viewer (like highslide, lightview, lightwindow, modalbox, triptracker slideshow for example). They do provide viewing of other content as images and slideshow features etc etc.

    And thanks for the Wiki page BTW icon_smile



    Edited by espaan on Jun 18, 2010 - 01:43 PM.

    --
    campertoday.nl, Module development, Dutch Zikula Community
  • Quote

    I think that needs a much more featured viewer (like highslide, lightview, lightwindow, modalbox, triptracker slideshow for example). They do provide viewing of other content as images and slideshow features etc etc.

    I believe you are correct. I decided to play around with it a bit and couldn't get it to display pages.

    Quote

    And thanks for the Wiki page BTW icon_smile

    My pleasure!

    --
    Harness Technology
  • Zikula's ImageViewer is just for images (hence the name icon_smile ). It could of course be adapted but there are better solutions one can use for modal boxes and windows such as livepipe, which BTW is included in 1.3.0. So, such features will be covered.
  • Yeah, I kind of figured the name was a dead giveaway. But you never know! icon_smile

    Whenever possible, I like to use the stuff built-in to Zikula. Why install a bunch of crap if Zikula already has it? But yes, it would be nice to have some functionality like modalbox has.

    --
    Harness Technology
  • Wendell - ImageViewer does not have many options, but you can overwrite them.
    Just put somewhere in template inside SCRIPT tag (which was stripped from this post :/ ) this code

    Code

    Zikula.ImageViewer.setup({
        speed: 1, // speed factor for effects used for show/prev/next action
        draggable: true, // turn on/off image dragging
        caption: true, // turn on/off image capition
        pager: true, // turn on/off image pager (with image counter - X of Y(
        modal: true, // turn on/off overlay
        enablekeys: true, // turn on/off navigation through keyboard (esc,left,right)
        langLabels: { // you can overwrite default labels used in imageviewer
            close: 'Close',
            next: 'Next',
            prev: 'Prev',
            pager: 'Image #{index} of #{total}'
        }
    });

    Above example contains all avaiable options.
    This will setup all ImageViewer instances on given page.



    Edited by Jusuff on Jun 19, 2010 - 11:49 PM.

    --
    Polish Zikula Team
    Bianor Works - my Zikula works on CoZi
  • Nice! icon_eek Thank you. I've updated the Wiki page to include this information.

    --
    Harness Technology
  • 0 users

This list is based on users active over the last 60 minutes.