Click on the photo for the next one

JM|Tomi
JM|Tomi's picture

Joined: 2004-10-11
Posts: 54
Posted: Tue, 2010-11-23 08:50

Hi guys,

I would like to see a nice feature in the gallery: on the photo page when user clicks on the photo itself, the next photo should be displayed. It's the same behaviour as the NEXT button, but it's more useful if the user has the possibility to click on the image instead, and he or she doesn't have to locate the next button and click on it (in some cases user has to scroll down to locate it).
I don't know where to implement it: in a theme or in a module or in the gallery 'core', but I the best way would be to have it generally available independently from the theme.

Of course the question is: is it easy to implement?

Regards,
JM|Tomi

 
tempg

Joined: 2005-12-17
Posts: 1857
Posted: Tue, 2010-11-23 14:40

It should be a theme-level issue.
What theme are you using?

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Tue, 2010-11-23 14:55

temmpg is right.
It would be up to the theme author to have this behavior.
I have not tried all themes:
http://codex.gallery2.org/Category:Gallery_3:Themes
but I can assume that one might have this behavior or a admin setting to do so.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
JM|Tomi
JM|Tomi's picture

Joined: 2004-10-11
Posts: 54
Posted: Tue, 2010-11-23 18:18

Currently I use the wide-wind. Could you guys give me a short guide where to change the theme?

Here is the corresponding photo.html.php:

<div id="g-item">
  <?= $theme->photo_top() ?>

  <?= $theme->paginator() ?>

  <div id="g-photo">
    <?= $theme->resize_top($item) ?>
    <? if (access::can("view_full", $item)): ?>
    <a href="<?= $item->file_url() ?>" class="g-fullsize-link" title="<?= t("View full size")->for_html_attr() ?>">
      <? endif ?>
      <?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize")) ?>
      <? if (access::can("view_full", $item)): ?>
    </a>
    <? endif ?>
    <?= $theme->resize_bottom($item) ?>
  </div>

  <div id="g-info">
    <h1><?= html::purify($item->title) ?></h1>
    <div><?= nl2br(html::purify($item->description)) ?></div>
  </div>

The line starts with '<a href...' will open the full size image, this is the part I have to change.
The paginator has a lot of stuff I think this is what I need:

//   $next_page_url           - the url to the next page, if there is one

I'm not familiar with the variable scopes between these .html.php files, are they accessible from each other?
And a checking should be performed to see if the next page is exist or not (in case of last page). I tried to change the lines around 'a href' to this:

      <? if (isset($next_page_url)): ?>
      <a href="<?= $next_page_url() ?>" class="???" title="<?= t("Next photo") ?>">
      <? endif ?>

      <?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize")) ?>

      <? if (isset($next_page_url)): ?>
      </a>
      <? endif ?>

But it's not ok yet... no link is assigned to the photo. I guess the scopes of the variables.
And what should I set for the class?

Regards,
JM|Tomi

 
JM|Tomi
JM|Tomi's picture

Joined: 2004-10-11
Posts: 54
Posted: Tue, 2010-11-23 16:49

Ok, now I'm sure the problem is that the $next_page_url is not accessible from the photo.html.php, so the 'a href' part is skipped. How can I have it in that file?

Thanks,
JM|Tomi

 
tempg

Joined: 2005-12-17
Posts: 1857
Posted: Tue, 2010-11-23 18:30

Replace the g-photo div with this one:

  <div id="g-photo">
    <?= $theme->resize_top($item) ?>
    <? if (!empty($theme->next_item->id)) : ?>
        <a href="<?= $theme->next_item->url() ?>" title="<?= t("View next")->for_html_attr() ?>">
    <? endif ?>
    <?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize")) ?>
    <? if (!empty($theme->next_item->id)) : ?>
  		</a>
    <? endif ?>
    <?= $theme->resize_bottom($item) ?>
  </div>

(I'm not sure if that theme has an icon for access to full-sized images; if not, changing this will eliminate access to full-sizes.)

 
JM|Tomi
JM|Tomi's picture

Joined: 2004-10-11
Posts: 54
Posted: Tue, 2010-11-23 18:51

Ok, this was the winner solution!

It wasn't easy, because there is a great function in the paginator.html.php that can be used for the next image url (next_page_url), but only inside the paginator.html.php!
From photo.html.php it is not accessible.

Thanks,
JM|Tomi

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Wed, 2010-11-24 00:45

Care to create a new theme and share with others?

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
JM|Tomi
JM|Tomi's picture

Joined: 2004-10-11
Posts: 54
Posted: Thu, 2010-11-25 12:40

Hi Dave,

I will do it just give me some days. Right now I'm very busy with my work.

Regards,
JM|Tomi

 
JB2448
JB2448's picture

Joined: 2010-10-02
Posts: 26
Posted: Thu, 2010-11-25 17:28

Yes! This is a feature I've been waiting for. Thank you so much!

 
Armani2

Joined: 2007-05-09
Posts: 263
Posted: Mon, 2010-11-29 00:31

I was wanting to do this also, I do understand what tempg did, but I cant seem to follow what JMTomi Is saying or what he changed or edited.. If someone can lead me in the right direction I would appreciate it....
Thanks..
Marcus

 
JM|Tomi
JM|Tomi's picture

Joined: 2004-10-11
Posts: 54
Posted: Mon, 2010-11-29 08:39

Hi,

Ok, here it is stepbystep (for widewind theme, I don't know if the other themes are different but should be similar):
1. open widewind\views\photo.html.php
2. goto line 33
This <div...> section generates the photo on the photo pages:

  <div id="g-photo">
    <?= $theme->resize_top($item) ?>
    <? if (access::can("view_full", $item)): ?>
    <a href="<?= $item->file_url() ?>" class="g-fullsize-link" title="<?= t("View full size")->for_html_attr() ?>">
      <? endif ?>
      <?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize")) ?>
      <? if (access::can("view_full", $item)): ?>
    </a>
    <? endif ?>
    <?= $theme->resize_bottom($item) ?>
  </div>

3. Replace this section to this:

  <div id="g-photo">
    <?= $theme->resize_top($item) ?>
    <? if (!empty($theme->next_item->id)) : ?>
        <a href="<?= $theme->next_item->url() ?>" title="<?= t("View next")->for_html_attr() ?>">
    <? endif ?>
    <?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize")) ?>
    <? if (!empty($theme->next_item->id)) : ?>
        </a>
    <? endif ?>
    <?= $theme->resize_bottom($item) ?>
  </div>

That's all!

Regards,
JM|Tomi

 
JM|Tomi
JM|Tomi's picture

Joined: 2004-10-11
Posts: 54
Posted: Mon, 2010-11-29 08:57

Hi Dave,

Where can I upload the new theme? Could you help me?

And about the name: what about Widewind_click4next.zip?

Also changed the theme.info to this:
name = "Wide Wind Click 4 Next"
description = "A 100% width theme based on the default wind theme (by floridave) with click on the photo for the next one extension."
version = 1
author = "JM|Tomi"
site = 1
admin = 0

Is it correct (regarding the angle of copyright)?

Thanks,
JM|Tomi

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Mon, 2010-11-29 14:18

No need to credit me.
Just attach the zip file here and I will create a codex page for you. Or better yet start a new thread for your new theme.
Thanks for your contribution.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
JM|Tomi
JM|Tomi's picture

Joined: 2004-10-11
Posts: 54
Posted: Mon, 2010-11-29 16:00

Here is the new theme that has this feature. Just click on the photo to navigate forward.
Try it and write if something went wrong.

Regards,
JM|Tomi

 
Armani2

Joined: 2007-05-09
Posts: 263
Posted: Mon, 2010-11-29 21:16

Thanks JMT and Dave, Im using Clean Canvas Wide and it works fine, It also works with the non wide version, and browny wind..
I have those with the new file inserted and zipped as I sent the cool new change to a couple of users of those other themes. I can post but i was thinking it would be up to the theme designer?
I did find one bug, You can no longer use Daves, resize_protect which i really like, think it has to do with the overlay or something..
Marcus

Thanks again..

 
tempg

Joined: 2005-12-17
Posts: 1857
Posted: Mon, 2010-11-29 22:35

You have a link to resize_protect? (I assume it's a module, but I don't see it listed on the modules page.)

 
Armani2

Joined: 2007-05-09
Posts: 263
Posted: Mon, 2010-11-29 22:48

Here It is, I had this activated when i first tried your script change, that is why i thought there was more to making the click for next image then you posted, once i removed resize_protect all was fine..
Thanks..
Marcus

http://codex.gallery2.org/Gallery3:Modules:resize_protect

 
tempg

Joined: 2005-12-17
Posts: 1857
Posted: Mon, 2010-11-29 23:03

Okay. Go back to the theme's photo.html.php file and replace the g-photo div with

<div id="g-photo">
    <?= $theme->resize_top($item) ?>
    <? if (!empty($theme->next_item->id)) : ?>
        <a href="<?= $theme->next_item->url() ?>" class="g-resize" title="<?= t("View next")->for_html_attr() ?>">
    <? endif ?>
    <?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize")) ?>
    <? if (!empty($theme->next_item->id)) : ?>
  		</a>
    <? endif ?>
    <?= $theme->resize_bottom($item) ?>
  </div>
 
Armani2

Joined: 2007-05-09
Posts: 263
Posted: Mon, 2010-11-29 23:35

Ok, Thats not working for me, I can still see that protection overlay loading on top of the actual photo thus disabling you from clicking on it (as im sure you know), I did find something funny and i know these no right clicks and overlays are only deterants and wont save photos If anyone really wants them. but if your on a slow connection like i am with my laptop, you can actually beat that module to the punch, just hit refresh and you can right mouse click and get the original photo before the overlay gets a change to load on top....

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Mon, 2010-11-29 23:42
Quote:
(I assume it's a module, but I don't see it listed on the modules page.)

Fixed a typo on the modules page to allow it to show on the list now.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
tempg

Joined: 2005-12-17
Posts: 1857
Posted: Mon, 2010-11-29 23:43

Okay. I'll have to install and play around with the resize_protect module. I'm not totally sure what the overlay is or exactly what you're seeing. Likely won't get to it today though.
(And yes, deterrent only.)

 
oliveman

Joined: 2011-08-09
Posts: 8
Posted: Sun, 2012-04-22 22:25
tempg wrote:
Okay. Go back to the theme's photo.html.php file and replace the g-photo div with

<div id="g-photo">
    <?= $theme->resize_top($item) ?>
    <? if (!empty($theme->next_item->id)) : ?>
        <a href="<?= $theme->next_item->url() ?>" class="g-resize" title="<?= t("View next")->for_html_attr() ?>">
    <? endif ?>
    <?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize")) ?>
    <? if (!empty($theme->next_item->id)) : ?>
  		</a>
    <? endif ?>
    <?= $theme->resize_bottom($item) ?>
  </div>

Thank you for this! I made this change using Grey Dragon theme and it worked perfectly.

 
chaosdax

Joined: 2005-12-27
Posts: 37
Posted: Mon, 2012-08-27 04:03

Handy little change, thanks!

 
fontipex
fontipex's picture

Joined: 2013-03-11
Posts: 1
Posted: Mon, 2013-03-11 02:01

i use Gallery 3.0.4 and Grey Dragon Thema 3.2.2, and i changed the lines 66, 67, and 68 of my themes/greydragon/views/photo.html.php.

original version:

           
<a style="<?= ($siblings[$i]->rand_key == $item->rand_key)? "display: static;" : "display: none;"; ?>" title="<?= $theme->get_item_title($item); ?>" <?= ($include_single)? "class=\"g-sb-preview\"" : "target=_blank;"; ?> <?= ($include_list)? "rel=\"g-preview\"" : null; ?> href="<?= (access::can("view_full", $item))? $item->file_url() : $item->resize_url(); ?>">

<?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize", "alt" => $_title)) ?>

</a>

changed version:

        
<a id="local-marker-id" style="<?= ($siblings[$i]->rand_key == $item->rand_key)? "display: static;" : "display: none;"; ?>" title="<?= t("View next")->for_html_attr(); ?>" <?= ($include_single)? "class=\"g-sb-preview\"" : "target=_blank;"; ?> <?= ($include_list)? "rel=\"g-preview\"" : null; ?> href="<?= (!empty($theme->next_item->id))? $theme->next_item->url() : "javascript:;"; ?>">

<?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize", "alt" => $_title)) ?>

</a>

additionally, to get the first image of an album if you click on the last image of that album, i added the following lines of code after line 117. (there the div-element, which has the id 'g-photo', has been closed.)

<script type="text/javascript">
        var shownImage = document.getElementById("local-marker-id");
	shownImage.onmouseover = function() {
		var backToFirstImageButton = document.getElementById("g-navi-first");
		var urlOfFirstImage = backToFirstImageButton.getAttribute('href');
		if (shownImage.getAttribute('href') == "javascript:;")
			shownImage.setAttribute('href', urlOfFirstImage);
	};
</script>

works perfectly fine... :)