How to show specific images

Hi Greg,

Thanks for your reply

Re your question on image uploads:

On the PC site it needs to display all six images on the individual record page

I am in the process of putting together a mobile site and in order to avoid having to scroll through six images I may limit it to 2 or 3 only and it will also reduce load time and bandwidth usage

Although I am hoping to use the slider that comes with the design but I am not sure if you can call images from a database into the slider

I have emailed the designer to see if you can

In the menatime I will run some test with your suggestions

Thank you - Mel

PS Did you add the screenshot  as I cannot see the link :-)

Hi Mel,

I just realised I didn't attach that screenshot to the last post.

Let me know if you need any help integrating the images from the database into the slider.

Thanks!

Greg

Hi Greg,

No reply from the designer of the mobile template as yet so I have substituted a different slider which I have used for static images on another site before

This latest version also includes swipe for mobile sites although I have not set this part up as yet

I know I said that I will probably only use 2 or 3 of the six images but I thought for starters I would keep it simple for testing and rotate through all 6 images but with a view to displaying just 3 images once I have got it to work

I can get the slider to call the images from the database, so I am heading in the right direction, but it displays all six images in one go and breaks out of the slider box, is this because I am calling all the images in one hit? should I be adding something else to  the php code

See code below

Thanks - Mel

    <!-- mels slider test -->
    <script type="text/javascript">

    jQuery(document).ready(function($){
        $('#my-slider').advancedSlider({width: 250,
                                              height: 330,
                                             skin: 'minimal-small',
                                                shuffle: false,
                                                slideshowControls: true,
                                                slideshowControlsToggle: false,
                                                slideArrowsToggle: true,
                                                slideButtonsNumber: true,
                                                timerAnimationControls: false,
                                                timerRadius: 20,
                                             timerStrokeColor1: '#ffffff',
                                             timerStrokeColor2: '#000000',
                                             timerStrokeOpacity1: 0.8,
                                             timerStrokeWidth1: 6,
                                             timerStrokeWidth2: 3,
                                             fullscreenControls: true,
                                                effectType: 'slide',
                                             slideEasing: 'easeInOutExpo',
                                                slideLoop: true,
                                                overrideTransition: true
                                        
        });
    });
    
</script>
    
    <div class="advanced-slider" id="my-slider">
        <ul class="slides">
        <?php foreach ($biosRecord['nsimages'] as $upload): ?>
        
        <li class="slide">
                <img class="image" src="<?php echo get_custom_watermark_url($upload['urlPath'], 'watermarkNew.png') ?>" />                                    
        </li>
        <?php endforeach ?>
        </ul>
    </div>
    <br class="clear" />
    <!-- /mels slider test -->

Hi Mel,

So the slider system isn't working, and all of the images are being displayed at once? Looking at how you have your page set up, I think your PHP code is fine, and calling all of the images in one go shouldn't have any affect. I think it's most likely to be a problem with your slider system.

Have you tried using firefox firebug or  Chromes console to check if any Javascript files are missing, or if there are any bugs in the Javascript code?

Thanks!

Greg

Hi Greg,

Found the problem

In the documentation the pathway to one of the CSS files was not correct, changed that and it worked straightaway

Also your first solution to showing selected images works a treat will also test your second solution when I get a moment

Thanks for your help and also the firefox firrebug suggestion -  will remember that one for the future

Mel