Topic: Arrows for large images

Pls, visit http://www.johnmarrs.com/portifolio and click on any left-side gallery item, we have used here SimpleViewer WordPress plugin.

We were wondering if it was possible to have some kind of back and forth arrow to the large photo so you have the option of clicking back and forth as well as being able to click on the thumbnails, its sometimes is annoying to have to scroll down on the page to the bottom thumbnail if it has a lot of photos. Let me know if you understand what I mean.

So basically, we only want to add the ability to click on arrows on either side of the large image that will show the next image or previous from that gallery.

Pls, reply soon.

Regards
Debasish

Re: Arrows for large images

Set showImageNav="HOVER" or showImageNav="ALWAYS" in your gallery's XML file (or in WP-SimpleViewer's 'Pro Options' text area) and set imageNavStyle to one of the following: CURSOR, BIG, CIRCLE, SQUARE, CLASSIC, TRIANGLE.
Please see here for the available 'Image Overlay Options': http://simpleviewer.net/simpleviewer/pr … ml#overlay

Steven Speirs
SimpleViewer Support Team.

Re: Arrows for large images

Hi Steven,

Thank you very much for your reply. But, I can't save any text under WP-SimpleViewer's 'Pro Options' text area for each galleries. Can you Pls, also confirm in which directory the gallery XML files are stored?

Regards
Debasish

Re: Arrows for large images

Please note that in order for Pro Options (entered into the 'Pro Options' text area in WP-SimpleViewer's gallery settings pop-up window) to take effect, you will need to to upgrade WP-SimpleViewer from SimpleViewer-Standard to SimpleViewer-Pro by following these instructions: http://simpleviewer.net/simpleviewer/su … iewer/#pro

But, I can't save any text under WP-SimpleViewer's 'Pro Options' text area for each galleries.

Once you have upgraded WP-SimpleViewer to SimpleViewer-Pro, any Pro Options entered into the text area in the form:

showImageNav="HOVER"

... should be entered successfully into the gallery's XML file.

Can you Pls, also confirm in which directory the gallery XML files are stored?

The XML files are stored in the 'wp-content/uploads/' folder. The name of each XML file is the corresponding gallery's id (found in the shortcode in the relevant post or within the 'Edit Galleries' section in the WordPress Dashboard) followed by the .xml extension.

Steven Speirs
SimpleViewer Support Team.

Re: Arrows for large images

Hi Stephen,

We are using following code for http://www.johnmarrs.com/portifolio , can you Pls, inform how can we add two buttons as Prev - Next here for each galleries? OR Can you Pls, update this following code for this requirement? Its really needed for us and we will be very much grateful if you can help us.

<?php /* Template Name: portifolio */ ?>
<?php get_header(); ?>
<style type="text/css">
    .viewer{
        display: none;
    }
    .link{
        cursor: pointer;
        background: #55596A;
    }
    a.selected{
        background: #424244;
    }
    .simpleviewerpane{
        float: right;
        width: 600px;
        margin: 25px 25px 0 0;
        padding: 0 0 0 50px;
    }
    .simpleviewerpane img{
        max-width: 590px;
    }
    .subpagetitle{
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    #simpleviewer{
        margin: 0 0 0 1.5em;
    }
</style>
<script type="text/javascript">
    function init(){
        jQuery("#simpleviewer div dl dt.gallery-icon a").click(function(){
            var src = jQuery(this).attr("href");            
            jQuery("#simpleviewerpane").hide();
            jQuery("#simpleviewerpane").html("<img src='"+src+"' />");
            jQuery("#simpleviewerpane").show(500);
            $("html, body").animate({ scrollTop: 0 }, "slow");
            return false;
        });
    }
</script>
<div id="container">
    <div id="content" role="main">
        <div class="portfolio">
            <ul>
                <li>
                    <a class="link" onclick="setsimpleviewer(393)" id="393">
                        <?php
                        $pageID = 393;
                        $page = get_post($pageID);
                        echo $page->post_title;
                        ?>
                    </a>
                </li>
                <li>
                    <a class="link" onclick="setsimpleviewer(397)" id="397">
                        <?php
                        $pageID = 397;
                        $page = get_post($pageID);
                        echo $page->post_title;
                        ?>
                    </a>
                </li>
                <li>
                    <a class="link" onclick="setsimpleviewer(389)" id="389">
                        <?php
                        $pageID = 389;
                        $page = get_post($pageID);
                        echo $page->post_title;
                        ?>
                    </a>
                </li>
                <li>
                    <a class="link" onclick="setsimpleviewer(48)" id="48">
                        <?php
                        $pageID = 48;
                        $page = get_post($pageID);
                        echo $page->post_title;
                        ?>
                    </a>
                </li>
                <li>
                    <a class="link" onclick="setsimpleviewer(395)" id="395">
                        <?php
                        $pageID = 395;
                        $page = get_post($pageID);
                        echo $page->post_title;
                        ?>
                    </a>
                </li>
                <li>
                    <a class="link" onclick="setsimpleviewer(399)" id="399">
                        <?php
                        $pageID = 399;
                        $page = get_post($pageID);
                        echo $page->post_title;
                        ?>
                    </a>
                </li>
                <li>
                    <a class="link" onclick="setsimpleviewer(85)" id="85">
                        <?php
                        $pageID = 85;
                        $page = get_post($pageID);
                        echo $page->post_title;
                        ?>
                    </a>
                </li>
                <li>
                    <a class="link" onclick="setsimpleviewer(391)" id="391">
                        <?php
                        $pageID = 391;
                        $page = get_post($pageID);
                        echo $page->post_title;
                        ?>
                    </a>
                </li>                
            </ul>
            <div id="simpleviewer"></div>
        </div>
    </div>
    <div class="simpleviewerpane" id="simpleviewerpane"></div>
    <div class="simpleviewerpane" id="viewerpane"></div>
    <div class="clear-fix"></div>
</div>
<?php get_footer(); ?>
                        <div id="simpleviewer_85" class="viewer">
    <?php
                        echo do_shortcode('[gallery id="85" columns="3" size="thumbnail" link="file"]');
    ?>
                    </div>
                    <div id="simpleviewer_48" class="viewer">
    <?php
                        echo do_shortcode('[gallery id="48" columns="3" size="thumbnail" link="file"]');
    ?>
                    </div>
                    <div id="simpleviewer_389" class="viewer">
    <?php
                        echo do_shortcode('[gallery id="389" columns="3" size="thumbnail" link="file"]');
    ?>
                    </div>
                    <div id="simpleviewer_391" class="viewer">
    <?php
                        echo do_shortcode('[gallery id="391" columns="3" size="thumbnail" link="file"]');
    ?>
                    </div>
                    <div id="simpleviewer_393" class="viewer">
    <?php
                        echo do_shortcode('[gallery id="393" columns="3" size="thumbnail" link="file"]');
    ?>
                    </div>
                    <div id="simpleviewer_395" class="viewer">
    <?php
                        echo do_shortcode('[gallery id="395" columns="3" size="thumbnail" link="file"]');
    ?>
                    </div>
                    <div id="simpleviewer_397" class="viewer">
    <?php
                        echo do_shortcode('[gallery id="397" columns="3" size="thumbnail" link="file"]');
    ?>
                    </div>
                    <div id="simpleviewer_399" class="viewer">
    <?php
                        echo do_shortcode('[gallery id="399" columns="3" size="thumbnail" link="file"]');
    ?>
                    </div>



                    <div id="simpleviewerpane_85" class="viewer">
    <?php
                        echo get_first_image("85", true, array('500', '600'));
    ?>
                    </div>
                    <div id="simpleviewerpane_48" class="viewer">
    <?php
                        echo get_first_image("48", true, array('500', '600'));
    ?>
                    </div>
                    <div id="simpleviewerpane_389" class="viewer">
    <?php
                        echo get_first_image("389", true, array('500', '600'));
    ?>
                    </div>
                    <div id="simpleviewerpane_391" class="viewer">
    <?php
                        echo get_first_image("391", true, array('500', '600'));
    ?>
                    </div>
                    <div id="simpleviewerpane_393" class="viewer">
    <?php
                        echo get_first_image("393", true, array('500', '600'));
    ?>
                    </div>
                    <div id="simpleviewerpane_395" class="viewer">
    <?php
                        echo get_first_image("395", true, array('500', '600'));
    ?>
                    </div>
                    <div id="simpleviewerpane_397" class="viewer">
    <?php
                        echo get_first_image("397", true, array('500', '600'));
    ?>
                    </div>
                    <div id="simpleviewerpane_399" class="viewer">
    <?php
                        echo get_first_image("399", true, array('500', '600'));
    ?>
                    </div>
                    
<input type="hidden" id="classname" value="399" />
<script type="text/javascript">
    function setsimpleviewer(pid){
        document.getElementById("simpleviewer").innerHTML = document.getElementById("simpleviewer_"+pid).innerHTML;
        init();
        jQuery("#simpleviewerpane").hide();
        jQuery("#simpleviewerpane").html(jQuery("#simpleviewerpane_"+pid).html(), "slow");
        jQuery("#simpleviewerpane").show(500);        
        var oldelement = document.getElementById("classname").value;
        document.getElementById("classname").value = pid;
        document.getElementById(oldelement).setAttribute("class", "link");
        document.getElementById(pid).setAttribute("class", "selected link");        
    }
</script>

Re: Arrows for large images

I have taken a look at your web page and your galleries are not SimpleViewer galleries (although you do seem to have WP-SimpleViewer installed and activated).

Steven Speirs
SimpleViewer Support Team.