[Plugin: Kommiku]Reader image resizing and zooming option

Hi, I have this available at thetosho.com. The code is as follow:

You will need a button to expand the image in case they want to zoom in. Also, I have made the conditions as follow, if the image’s width is bigger than 950, then the zoom button will appear with the word “Expand Image”.

<?php global $imageWidth; if($imageWidth > 950) {?><li id="expand" >Expand Image</li><?php } ?>

This, I put in body_page.php

In the header, I have javascript function that when the button is clicked it will expand or shrink:

var expanded;
			jQuery('#expand').click(function() {
				if(expanded == true) {
					$j("#theBigImage").addClass('constraintImage');
					expanded = false;
					$j("#expand").removeClass('iconResize').addClass('iconExpand');;
				} else {
					$j("#theBigImage").removeClass('constraintImage');
					expanded = true;
					$j("#expand").removeClass('iconExpand').addClass('iconResize');;
				}
			});

The last part will be setting a global var in the function img() in reader.php

It should be near around $wrapper

if($width > 950) {
					$class = 'class="constraintImage"';
					$imageWidth = $width;
					}

				$wrapper = '<img id="theBigImage" src="'.$imagePath.'"'.$class.'/>';

Don’t foget to have $imageWidth as a global var

thanks Anraiki you rock

do i have to replace any thing by this

if($width > 950) {
					$class = 'class="constraintImage"';
					$imageWidth = $width;
					}

				$wrapper = '<img id="theBigImage" src="'.$imagePath.'"'.$class.'/>';

i is not working i did exactly as you told but its not working

i think i have made some mistake in the placement of

if($width > 950) {
					$class = 'class="constraintImage"';
					$imageWidth = $width;
					}

				$wrapper = '<img id="theBigImage" src="'.$imagePath.'"'.$class.'/>';

could you take a look at my reader.php

<?php
if(($isPage)) {
	global $previousPage, $previousLink, $nextPage, $nextLink, $kommiku, $theimage;
	if($kommiku['series_chapter']) {
		foreach ($kommiku['series_chapter'] as $chapterList) { $h++;
			$chapterLists[$h] = $chapterList->slug;
			$chapterListID[$h] = $chapterList->id;
			if($select) {
				$nextChapter = $chapterList->slug;
				$nextChapterID = $chapterList->id;
			}
			unset($select);
			if($chapterList->slug == $chapter["slug"]) {
				$select = "selected=selected ";
				$chapterSelected = $h;
			}
			unset($chapterTitle);
			if ($chapterList->title) $chapterTitle = ' - '.stripslashes($chapterList->title);
			$chapter_items[$chapterList->number] = '<option '.$select.'value="'.$chapterList->slug.'">'.$chapterList->slug.$chapterTitle.'</option>';
			if($select) {
				$pass = $h-1;
				if(isset($chapterListID[$pass])) $previousChapter = $chapterLists[$pass];
				if(isset($chapterListID[$pass])) $previousChapterID = $chapterListID[$pass];
			}
		}
		natsort($chapter_items);
		krsort($chapter_items);
		foreach($chapter_items as $chapter_item){
			$kommiku['chapterOption'] .= $chapter_item;
		}
		$chapterOption = $kommiku['chapterOption'];
	}

	if($chapter_pages) {
	foreach ($chapter_pages as $pageList) { $i++;
		$pageLists[$i] = $pageList->number;
		if(isset($select)) $nextPage = $pageList->slug;
		unset($select);
		if($pageList->number == $page["number"]) {
			$select = "selected=selected ";
			$pageSelected = $pageList->number;
		}
		$kommiku['pageOption'] .= '<option '.$select.'value="'.$pageList->slug.'">'.$pageList->slug.'</option>';
		$lastPage = $pageList->number;
		if($select) $previousPage = $pageLists[$i-1];
		}
	}
	$pageOption = $kommiku['pageOption'];

	if(isset($chapter["number"])){
		$chapter["next"] = $chapter["slug"].'/';
		$chapter["previous"] = $chapter["slug"].'/';
	}

	if($lastPage == $pageSelected && $nextChapterID) {
		$number = $wpdb->get_var("SELECT min(number) FROM <code>&quot;.$wpdb->prefix.&quot;comic_page</code> WHERE chapter_id = '".$nextChapterID."'");
		$nextPage = $wpdb->get_var("SELECT min(slug) FROM <code>&quot;.$wpdb->prefix.&quot;comic_page</code> WHERE chapter_id = '".$nextChapterID."' AND number = '".$number."'");
		$chapter["next"] = $nextChapter.'/';
		} else if ($lastPage == $pageSelected) {
			unset($nextPage);
		}

	if(is_null($previousPage) && $previousChapterID) {
		$number = $wpdb->get_var("SELECT max(number) FROM <code>&quot;.$wpdb->prefix.&quot;comic_page</code> WHERE chapter_id = '".$previousChapterID."'");
		$previousPage = $wpdb->get_var("SELECT slug FROM <code>&quot;.$wpdb->prefix.&quot;comic_page</code> WHERE chapter_id = '".$previousChapterID."' AND number = '".$number."'");
		$chapter["previous"] = $previousChapter.'/';
	}  

	if(KOMMIKU_URL_FORMAT)
		$komUrlDash = KOMMIKU_URL_FORMAT.'/';

	if(!$kommiku['one_comic'])
		$seriesUrl = $series["slug"].'/';

	if($chapter) {
		if(isset($previousPage)) $previousLink = HTTP_HOST.$komUrlDash.$seriesUrl.$chapter["previous"].$previousPage.'/';
		if(isset($nextPage)) $nextLink = HTTP_HOST.$komUrlDash.$seriesUrl.$chapter["next"].$nextPage.'/';
	} else {
		if(isset($previousPage)) $previousLink = HTTP_HOST.$komUrlDash.$seriesUrl.$previousPage.'/';
		if(isset($nextPage)) $nextLink = HTTP_HOST.$komUrlDash.$seriesUrl.$nextPage.'/';
	}

	function prevPage($link = false,$wrapper = '',$class = NULL,$title = NULL) {
		global $previousPage, $previousLink;

		if($link && isset($previousLink)) {
			if($class) $class = 'class="'.$class.'" ';
			if($title) {
				$title = 'title="'.$title.'" ';
			} else {
				$title =  'title="'.__("Read the previous page", 'kommiku').'"';
			}
			echo '<a '.$class.$title.'href="'.$previousLink.'">'.$wrapper.'</a>';
		} else if($link) {
			echo $wrapper;
		} else {
			echo $previousLink;
		}

	}

	function checkPrevPage() {
		global $previousPage, $previousLink;

		if(isset($previousPage) && isset($previousLink))
			return true;

		return false;

	}

	function checkNextPage() {
		global $nextPage, $nextLink;

		if(isset($nextLink) && isset($nextPage))
			return true;

		return false;

	}

	function nextPage($link = false,$wrapper = '',$class = NULL,$title = NULL) {
		global $nextPage, $nextLink;

		if($link && isset($nextLink)) {
			if($class) $class = 'class="'.$class.'" ';
			if($title) {
				$title = 'title="'.$title.'" ';
			} else {
				$title = 'title="'.__("Read the next page", 'kommiku').'"';
			}
			echo '<a '.$class.$title.'href="'.$nextLink.'">'.$wrapper.'</a>';
		} else if($link) {
			echo $wrapper;
		} else {
			echo $nextLink;
		}

	}

	function img($echo = true,$class = NULL,$title = NULL) {
		global $nextPage, $nextLink, $series, $chapter, $page;

		if($chapter["folder"]) {
			$url = $chapter["folder"];
		} else if($series['chapterless'] != 0) {
			$url = '/'.$series["slug"].'/';
		} else {
			die('Something is wrong here!');
		}

		$theimage = UPLOAD_URLPATH.$url.$page["img"];
		$theimage_abs = UPLOAD_FOLDER.$url.$page["img"];

		if($width > 950) {
			$class = 'class="constraintImage"';
			$imageWidth = $width;
			}

			$wrapper = '<img id="theBigImage" src="'.$imagePath.'"'.$class.'/>';

		if(file_exists($theimage_abs) && $echo == true) {
			$wrapper = '<img src="'.$theimage.'" />';

		} else {
			return $theimage;
		}

		if(isset($nextLink)) {
			if($class) $class = 'class="'.$class.'" ';
			if($title) {
				$title = 'title="'.$title.'" ';
			} else {
				$title = 'title="'.__("Read the next page", 'kommiku').'"';
			}
			echo '<a '.$class.$title.'href="'.$nextLink.'">'.$wrapper.'</a>';
		} else {
			echo $wrapper;
		} 

	}

}

?>

You forgot to add $imageWidth in the global vars.

Should be like this:

global $nextPage, $nextLink, $series, $chapter, $page, $imageWidth;

in the function img()

So right on it:

function img($echo = true,$class = NULL,$title = NULL) {
		global $nextPage, $nextLink, $series, $chapter, $page, $imageWidth;

@anraiki thanks but still not working

an other thing i noticed is in wrapper it is using $theimage while you are using $imagepath i did changed it to $theimage to see if it worked but of no avail

my reader.php
[Code moderated as per the Forum Rules. Please use the pastebin]

here is my reader.php
my body_page.php looks like this
and header.php

Copy and Delete line 160 which is:
$wrapper = '<img id="theBigImage" src="'.$imagePath.'"'.$class.'/>';

Replace Line 163 with the one at line 160
$wrapper = '<img src="'.$theimage.'" />';

Also make sure you style the class in the style.css

.constraintImage {
	width: 950px;
}

now even the image does not appear and when i looked the $imagepath have not been registered any where and secondly if i replace $imagepath with $theimage the image is displayed but the resizing doesn’t work

Are you testing this in production or on a sandbox? email me your files and I will see if I can get it set up properly.

yah i am testing this on my computer on the localhost and and i have emailed you my theme files both Kommiku and wordpress and also the copy of the plugin Kommiku itself

thanks for the help
and for others who wana do the same

In reader.php
add this around line 155 before if($width > 950)

list($width, $height, $type, $attr) = getimagesize($theimage);

In body_page.php you may want to remove line 8

and add a button to expand the image.

LASTLY in your header.php

this should work:

<script>
$j=jQuery.noConflict();
$j(document).ready(function() {
var expanded;
			$j('#expand').click(function() {
				if(expanded == true) {
					$j("#theBigImage").addClass('constraintImage');
					expanded = false;
					$j("#expand").removeClass('iconResize').addClass('iconExpand');;
				} else {
					$j("#theBigImage").removeClass('constraintImage');
					expanded = true;
					$j("#expand").removeClass('iconExpand').addClass('iconResize');;
				}
			});
		});
</script>

And now I’ve got the same problem with styling. I can’t actually add the button correctly. Where I can see a result reader.php and body_page.php? I didn’t understood where exactly to put list($width, $height, $type, $attr) = getimagesize($theimage);