Slideshow for external site

[donsenilo]

Hi ...

after many hours I've "created" a slideshow which can use on an external (outside of cpg) website.

Before I try to explain what I've done, take a look here (scroll down to "Gallery") to see what this all about.

Ok ...
I use SlideshowIt plugin for CPG1.6.x as base for my script (thank you to ron4mac for this plugin !) and some code I found here: Display a random image on an external website.
All this together works (in my case with cpg 1.5.46 and PHP 7) ... and YES !!! ... I'm also surprised as you are  .

I've created a file called "slideshow.php" in the cpg folder with this code:

Code Select Expand

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<?php 
// ------------------------------------------------------------------------- //
// Coppermine Photo Gallery - RSS Feed                                      //
// ------------------------------------------------------------------------- //
// Copyright (C) Dr. Tarique Sani                                           //
// http://tariquesani.net/                                                  //
// Adapted by djib to display a random photo - http://djib.biz              //
// This program is free software; you can redistribute it and/or modify     //
// it under the terms of the GNU General Public License as published by     //
// the Free Software Foundation; either version 2 of the License, or        //
// (at your option) any later version.                                      //
// ------------------------------------------------------------------------- //
// Just put into the same directory as your coppermine installation         //
// ------------------------------------------------------------------------ //

define('IN_COPPERMINE', true);
define('INDEX_PHP', true);
require('./include/init.inc.php');

//How many items you want to show in your get_photo script
if(isset($_GET['nb'])) {
     $thumb_per_page=$_GET['nb'];
} else {
     $thumb_per_page = 10;
}
$thumb_count = 10;
$lower_limit = 0;

if(isset($_GET['album'])){
    $album = $_GET['album'];
}

//If it is a numeric album get the name and set variables
if ((is_numeric($album))){
     $album_name_keyword = get_album_name($album);
     $CURRENT_CAT_NAME = $album_name_keyword['title'];
     $ALBUM_SET = "AND aid IN (".(int)$_GET['album'].")".$ALBUM_SET;
     //Set the album to last uploaded
     $album = 'lastup';
}

//If the album is not set set it to lastup - this is the default
if(!isset($album)){
     $album = 'lastup';
}


//Changes these to point to your site if the following is not giving correct results.
$link_url = $CONFIG['ecards_more_pic_target']."displayimage.php?pos=-";
$image_url = $CONFIG['ecards_more_pic_target']."albums/";


$data = get_pic_data($album, $thumb_count, $album_name, $lower_limit, $thumb_per_page);


foreach($data AS $picture) {
$thumb_url = "$image_url$picture[filepath]$picture[filename]";
    $description = '<a target="_parent" href="' . $link_url . $picture['pid'] . '"><img style="border-radius: 8px;  border: 1px solid black; width: 100%;" class="mySlides w3-animate-fading" src="' . $thumb_url . '"/></a>';
    echo $description;



}


?>

<script>
var myIndex = 0;
carousel();
function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none"; 
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}   
    x[myIndex-1].style.display = "block"; 
    setTimeout(carousel, 5000);   
}
</script>

Then I put this code in my index.php in my website root:

Code Select Expand

<div class="w3-content w3-section" style="background-color: none;">
<iframe  style="height: 380px; width: 500px;" src="cpg15x/slideshow.php" name="header_frame" marginheight="0" marginwidth="0" frameborder="0" scrolling="no"></iframe></div>

I don't know but maybe this is helpful for others ...

[donsenilo]

I forgot to mention that there could be a problem with LightBox Slideshow jquery (NotesFor.net) v3.2. Maybe it's because of my code or lightbox ... at the moment I don't know.

[ron4mac]

Your site is actually running CPG 1.6.03.

[sjj1805]

Word of caution
The plug in itself is brilliant and simple to set up. It was just the sort of thing I have been looking for for some considerable time.
However
It is using the full size images from your web site, I discovered this when I suddenly had a couple of messages from my mobile phone provider to let me know that my monthly data allowance was running low - this is very unusual for me as I dont use my data allowance that much. I logged onto my mobile phone account and checked what data I had been using and it coincided with me viewing my own website (I was checking to see how it looked on my phone elsewhere than at home where I would be using my wifi connection.)

I can alter a few things in these plug-ins by studying what it looks like the code is achieving but having said that I am not in any way profficient in PHP or W3.CSS.
Anyone out there who could perhaps tweak the code so that it fetches the image thumbnails rather than the full size images?
In the meantime I have had to disable this otherwise brilliant plug-in from my site.

[Αndré]

Try to replace

Code Select Expand

$thumb_url = "$image_url$picture[filepath]$picture[filename]";
with

Code Select Expand

$thumb_url = $image_url.$picture['filepath'].$CONFIG['thumb_pfx'].$picture['filename'];

[sjj1805]

Thanks for looking at this Andre.
I hope these two screen shots can help.

Before Changing Code
After Changing Code

[sjj1805]

I have found an alternative way to achieve the same end result - i.e. creating a small animation that you can place on your website.
It is some very old Microsoft software but it still works perfectly, free and easy to use.
Microsoft GIF Animator.
Wikipeadia Article
Can be downloaded here (softonic.com)
Working example on my website
Working example is just above the calendar on the right hand column. Click the picture and it opens the coppermine location of the album.

Hope this may help.

[Αndré]

Thanks for looking at this Andre.
I hope these two screen shots can help.

Before Changing Code
After Changing Code

Sorry, I added the thumb prefix at the wrong location. I just modified the above code, now it should work as expected.

[sjj1805]

Thanks Andre, The new replacement code works fine.

[panhead]

The code works, but the changed code still shows the big format pictures.

[KchoPrro]

Hi ...

after many hours I've "created" a slideshow which can use on an external (outside of cpg) website.

Before I try to explain what I've done, take a look here (scroll down to "Gallery") to see what this all about.

Ok ...
I use SlideshowIt plugin for CPG1.6.x as base for my script (thank you to ron4mac for this plugin !) and some code I found here: Display a random image on an external website.
All this together works (in my case with cpg 1.5.46 and PHP 7) ... and YES !!! ... I'm also surprised as you are  .

I've created a file called "slideshow.php" in the cpg folder with this code:

Code Select Expand

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<?php 
// ------------------------------------------------------------------------- //
// Coppermine Photo Gallery - RSS Feed                                      //
// ------------------------------------------------------------------------- //
// Copyright (C) Dr. Tarique Sani                                           //
// http://tariquesani.net/                                                  //
// Adapted by djib to display a random photo - http://djib.biz              //
// This program is free software; you can redistribute it and/or modify     //
// it under the terms of the GNU General Public License as published by     //
// the Free Software Foundation; either version 2 of the License, or        //
// (at your option) any later version.                                      //
// ------------------------------------------------------------------------- //
// Just put into the same directory as your coppermine installation         //
// ------------------------------------------------------------------------ //

define('IN_COPPERMINE', true);
define('INDEX_PHP', true);
require('./include/init.inc.php');

//How many items you want to show in your get_photo script
if(isset($_GET['nb'])) {
     $thumb_per_page=$_GET['nb'];
} else {
     $thumb_per_page = 10;
}
$thumb_count = 10;
$lower_limit = 0;

if(isset($_GET['album'])){
    $album = $_GET['album'];
}

//If it is a numeric album get the name and set variables
if ((is_numeric($album))){
     $album_name_keyword = get_album_name($album);
     $CURRENT_CAT_NAME = $album_name_keyword['title'];
     $ALBUM_SET = "AND aid IN (".(int)$_GET['album'].")".$ALBUM_SET;
     //Set the album to last uploaded
     $album = 'lastup';
}

//If the album is not set set it to lastup - this is the default
if(!isset($album)){
     $album = 'lastup';
}


//Changes these to point to your site if the following is not giving correct results.
$link_url = $CONFIG['ecards_more_pic_target']."displayimage.php?pos=-";
$image_url = $CONFIG['ecards_more_pic_target']."albums/";


$data = get_pic_data($album, $thumb_count, $album_name, $lower_limit, $thumb_per_page);


foreach($data AS $picture) {
$thumb_url = "$image_url$picture[filepath]$picture[filename]";
    $description = '<a target="_parent" href="' . $link_url . $picture['pid'] . '"><img style="border-radius: 8px;  border: 1px solid black; width: 100%;" class="mySlides w3-animate-fading" src="' . $thumb_url . '"/></a>';
    echo $description;



}


?>

<script>
var myIndex = 0;
carousel();
function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none"; 
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}   
    x[myIndex-1].style.display = "block"; 
    setTimeout(carousel, 5000);   
}
</script>

Then I put this code in my index.php in my website root:

Code Select Expand

<div class="w3-content w3-section" style="background-color: none;">
<iframe  style="height: 380px; width: 500px;" src="cpg15x/slideshow.php" name="header_frame" marginheight="0" marginwidth="0" frameborder="0" scrolling="no"></iframe></div>

I don't know but maybe this is helpful for others ...

Very interesting, it works perfectly for me on my main CPG page (I haven't tried it outside of CPG, at the moment). A couple of queries;

Instead of using "lastup", would it be possible to use a specific album? I know that the php file allows it but I don't know what option I would have to change and I would like to create an album specifically for the Slideshow, like horizontal images and a very specific measure.

For example, I would like to use the images contained in this album:

Álbum 45

What would the code look like in this case?

And another question, the code allows the link in each of the SlideShow images (it takes you to the specific image), would it be possible not to have the Link active?, the album that will supply images to the SlideShow will be private, the user when visiting the Link will not be able to enter.

Thanks, this looks great