Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Slideshow for external site  (Read 18822 times)

0 Members and 1 Guest are viewing this topic.

donsenilo

  • Coppermine regular visitor
  • **
  • Country: 00
  • Offline Offline
  • Gender: Male
  • Posts: 93
    • Bookmarks (Links), Grafik, Musik, Movies (Filme), DVD's, CD's, Amazon-Shop by Starmaker - Mark Tailor
Slideshow for external site
« on: August 21, 2017, 11:04:24 pm »

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  ;D .

I've created a file called "slideshow.php" in the cpg folder with this code:
Code: [Select]
<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]
<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 ...
Logged

donsenilo

  • Coppermine regular visitor
  • **
  • Country: 00
  • Offline Offline
  • Gender: Male
  • Posts: 93
    • Bookmarks (Links), Grafik, Musik, Movies (Filme), DVD's, CD's, Amazon-Shop by Starmaker - Mark Tailor
Re: Slideshow for external site
« Reply #1 on: August 21, 2017, 11:21:44 pm »

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.
Logged

ron4mac

  • Administrator
  • Coppermine addict
  • *****
  • Country: us
  • Offline Offline
  • Posts: 2026
Re: Slideshow for external site
« Reply #2 on: August 22, 2017, 12:49:06 pm »

Your site is actually running CPG 1.6.03.
« Last Edit: August 22, 2017, 12:57:49 pm by ron4mac »
Logged

sjj1805

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 30
Re: Slideshow for external site
« Reply #3 on: September 13, 2017, 01:12:51 am »

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.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Slideshow for external site
« Reply #4 on: September 28, 2017, 05:24:40 pm »

Try to replace
Code: [Select]
$thumb_url = "$image_url$picture[filepath]$picture[filename]";with
Code: [Select]
$thumb_url = $image_url.$picture['filepath'].$CONFIG['thumb_pfx'].$picture['filename'];
« Last Edit: September 29, 2017, 11:40:07 am by Αndré »
Logged

sjj1805

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 30
Re: Slideshow for external site
« Reply #5 on: September 29, 2017, 03:35:35 am »

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

Before Changing Code
After Changing Code

Logged

sjj1805

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 30
Re: Slideshow for external site
« Reply #6 on: September 29, 2017, 10:45:55 am »

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.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Slideshow for external site
« Reply #7 on: September 29, 2017, 11:41:15 am »

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.
Logged

sjj1805

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 30
Re: Slideshow for external site
« Reply #8 on: September 29, 2017, 06:45:46 pm »

Thanks Andre, The new replacement code works fine.
Logged

panhead

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 108
Re: Slideshow for external site
« Reply #9 on: December 02, 2019, 11:29:10 am »

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

KchoPrro

  • Coppermine frequent poster
  • ***
  • Country: es
  • Offline Offline
  • Gender: Male
  • Posts: 296
    • Adolfo Ventas - Naturaleza Andaluza
Slideshow for external site
« Reply #10 on: October 30, 2022, 12:06:14 pm »

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  ;D .

I've created a file called "slideshow.php" in the cpg folder with this code:
Code: [Select]
<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]
<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 :)
Logged
Pages: [1]   Go Up
 

Page created in 0.028 seconds with 20 queries.