Merge branch 'master' into 'deployment/production'
Master See merge request !33
Showing
5 changed files
with
646 additions
and
0 deletions
... | @@ -1238,6 +1238,63 @@ class WFFileBrowser extends JObject | ... | @@ -1238,6 +1238,63 @@ class WFFileBrowser extends JObject |
1238 | throw new InvalidArgumentException(JText::_('WF_MANAGER_FILE_LIMIT_ERROR')); | 1238 | throw new InvalidArgumentException(JText::_('WF_MANAGER_FILE_LIMIT_ERROR')); |
1239 | } | 1239 | } |
1240 | } | 1240 | } |
1241 | /** | ||
1242 | * 画像リサイズ処理 | ||
1243 | */ | ||
1244 | $fieldid = (string) $app->input->get('fieldid', '', 'STRING'); | ||
1245 | // ファイルがイントロ画像としてアップロードされていることを確認 | ||
1246 | if ($fieldid === 'jform_images_image_intro') { | ||
1247 | |||
1248 | // tmpディレクトリに一時保存されているupload予定のファイルパスを取得 | ||
1249 | $tmp_file = $file['tmp_name']; | ||
1250 | |||
1251 | // 画像情報を取得 | ||
1252 | $image_info = getimagesize($tmp_file); | ||
1253 | // 画像情報から画像の幅を取得 | ||
1254 | $width = (int) $image_info[0]; | ||
1255 | // リサイズ後の幅を定義 | ||
1256 | $new_width = 1600; | ||
1257 | |||
1258 | // 登録する画像の幅がリサイズ後の幅(1600px)より大きいことを確認(1600px以上でリサイズ処理) | ||
1259 | // 記事詳細ページでの画像表示と、サムネイル画像としての画像表示両方に対応できるように1600でリサイズ | ||
1260 | if ($width > $new_width) { | ||
1261 | // 画像情報から画像の高さを取得 | ||
1262 | $height = (int) $image_info[1]; | ||
1263 | // 画像タイプを取得 | ||
1264 | $image_type = $image_info['mime']; | ||
1265 | // アスペクト比(縦横比を取得) | ||
1266 | $aspect_ratio = $height / $width; | ||
1267 | // リサイズ後の高さを定義(アスペクト比を維持して定義) | ||
1268 | $new_height = $new_width * $aspect_ratio; | ||
1269 | |||
1270 | switch ($image_type) { | ||
1271 | // 画像タイプがPNGの場合の処理 | ||
1272 | case 'image/png': | ||
1273 | // 元の画像から新しい画像を作る準備 | ||
1274 | $base_image = imagecreatefrompng($tmp_file); | ||
1275 | // サイズを指定して新しい画像のキャンバスを作成 | ||
1276 | $new_image = imagecreatetruecolor($new_width, $new_height); | ||
1277 | // 画像のコピーと伸縮 | ||
1278 | imagecopyresampled($new_image, $base_image, 0, 0, 0, 0, $new_width, $new_height, $width, $height); | ||
1279 | // コピーした画像を出力 | ||
1280 | imagepng($new_image, $tmp_file); | ||
1281 | break; | ||
1282 | // 画像タイプがJPEGの場合の処理 | ||
1283 | case 'image/jpeg': | ||
1284 | // 元の画像から新しい画像を作る準備 | ||
1285 | $base_image = imagecreatefromjpeg($tmp_file); | ||
1286 | // サイズを指定して新しい画像のキャンバスを作成 | ||
1287 | $new_image = imagecreatetruecolor($new_width, $new_height); | ||
1288 | // 画像のコピーと伸縮 | ||
1289 | imagecopyresampled($new_image, $base_image, 0, 0, 0, 0, $new_width, $new_height, $width, $height); | ||
1290 | // コピーした画像を出力 | ||
1291 | imagejpeg($new_image, $tmp_file); | ||
1292 | break; | ||
1293 | default: | ||
1294 | break; | ||
1295 | } | ||
1296 | } | ||
1297 | } | ||
1241 | 1298 | ||
1242 | // Check total file size limit | 1299 | // Check total file size limit |
1243 | if (!empty($upload['total_size'])) { | 1300 | if (!empty($upload['total_size'])) { | ... | ... |
... | @@ -3431,6 +3431,122 @@ body.itemid-132 table { | ... | @@ -3431,6 +3431,122 @@ body.itemid-132 table { |
3431 | } | 3431 | } |
3432 | 3432 | ||
3433 | /* ------------------------------------------------------------------------- | 3433 | /* ------------------------------------------------------------------------- |
3434 | OB・OGインタビューページに対するスタイル指定 | ||
3435 | ------------------------------------------------------------------------- */ | ||
3436 | .interview .items-leading > div { | ||
3437 | border-top: 2px solid #003894; | ||
3438 | display: flex; | ||
3439 | flex-direction: row-reverse; | ||
3440 | align-items: center; | ||
3441 | position: relative; | ||
3442 | } | ||
3443 | |||
3444 | /* イントロテキストを表示しない設定ができないので、以下の設定で、一旦全てを非表示にする */ | ||
3445 | .interview .items-leading > div > * { | ||
3446 | display: none; | ||
3447 | } | ||
3448 | |||
3449 | .interview .items-leading div .page-header { | ||
3450 | display: block; | ||
3451 | width: 100%; | ||
3452 | padding: 0; | ||
3453 | margin: 32px 0; | ||
3454 | } | ||
3455 | |||
3456 | .interview .items-leading div .page-header h2 { | ||
3457 | /* .blogに対して指定されているスタイルを取り消し */ | ||
3458 | border-top: none; | ||
3459 | border-bottom: none; | ||
3460 | margin: 0; | ||
3461 | padding: 0; | ||
3462 | font-size: 100%; | ||
3463 | } | ||
3464 | |||
3465 | /* 記事情報(公開日など)にデフォルトでかかっているスタイルを取り消し */ | ||
3466 | .interview .items-leading div .article-info > * { | ||
3467 | margin-bottom: 0; | ||
3468 | } | ||
3469 | |||
3470 | .interview .items-leading div .article-info { | ||
3471 | /* 記事情報が一つ以上表示された場合に横並びにする */ | ||
3472 | display: block; | ||
3473 | /* 記事情報のpositionを右下に指定 */ | ||
3474 | position: absolute; | ||
3475 | margin: 0; | ||
3476 | bottom: 8px; | ||
3477 | right: 0; | ||
3478 | } | ||
3479 | |||
3480 | .interview .items-leading div .item-image { | ||
3481 | display: flex; | ||
3482 | /* flexによる圧縮をさせない */ | ||
3483 | flex-shrink: 0; | ||
3484 | /* 配下のimage要素とa要素を縦方向にセンタリング */ | ||
3485 | align-items: center; | ||
3486 | width: 140px; | ||
3487 | height: 105px; | ||
3488 | /* デフォルトでかかっているfloatプロパティの解除 */ | ||
3489 | float: none; | ||
3490 | /* 配下の画像のはみ出した部分は非表示にし、トリミングする */ | ||
3491 | overflow: hidden; | ||
3492 | margin: 12px 24px 12px 0; | ||
3493 | } | ||
3494 | .interview .items-leading div .item-image a { | ||
3495 | width: 100%; | ||
3496 | } | ||
3497 | |||
3498 | .interview .items-leading div .item-image img { | ||
3499 | /* 画像ごとによって縦横幅が自動設定。最大値以上にはならないように指定 */ | ||
3500 | width: 100%; | ||
3501 | } | ||
3502 | |||
3503 | /* 記事装飾スタイル */ | ||
3504 | .interview-first { | ||
3505 | padding: 12px; | ||
3506 | background-color: #e9f1ff; | ||
3507 | } | ||
3508 | .interview-profile { | ||
3509 | padding: 12px; | ||
3510 | border: 1px solid #ccc; | ||
3511 | } | ||
3512 | .interview-profile::before { | ||
3513 | display: block; | ||
3514 | content: "【プロフィール】"; | ||
3515 | } | ||
3516 | /* 記事装飾スタイルここまで */ | ||
3517 | |||
3518 | |||
3519 | /* レスポンシブ */ | ||
3520 | @media (max-width: 500px) { | ||
3521 | .interview .items-leading > div { | ||
3522 | /* 縦並びに変更 */ | ||
3523 | flex-direction: column-reverse; | ||
3524 | } | ||
3525 | |||
3526 | .interview .items-leading div .page-header { | ||
3527 | /* 記事情報が入るのでmargin-bottomは大きめにする */ | ||
3528 | margin: 16px 0 32px; | ||
3529 | } | ||
3530 | |||
3531 | .interview .items-leading div .item-image { | ||
3532 | width: 100%; | ||
3533 | /*max-height = 画面幅 - 両サイドのpadding * 0.75として4(幅):3(高さ)とする*/ | ||
3534 | max-height: calc((100vw - 30px) * 0.75); | ||
3535 | height: auto; | ||
3536 | margin: 20px 0 0; | ||
3537 | } | ||
3538 | } | ||
3539 | |||
3540 | |||
3541 | /* OB・OGインタビューページタイトル */ | ||
3542 | .interview .category-desc { | ||
3543 | margin-bottom: 8px; | ||
3544 | } | ||
3545 | .interview .category-desc p { | ||
3546 | margin-bottom: 6px; | ||
3547 | } | ||
3548 | |||
3549 | /* ------------------------------------------------------------------------- | ||
3434 | app/modules/mod_information_articles_archive_custom/tmpl/default.phpのスタイルを変更 | 3550 | app/modules/mod_information_articles_archive_custom/tmpl/default.phpのスタイルを変更 |
3435 | ------------------------------------------------------------------------- */ | 3551 | ------------------------------------------------------------------------- */ |
3436 | .archive-module-custom { | 3552 | .archive-module-custom { |
... | @@ -3462,3 +3578,311 @@ body.itemid-132 table { | ... | @@ -3462,3 +3578,311 @@ body.itemid-132 table { |
3462 | bottom: 47px; | 3578 | bottom: 47px; |
3463 | } | 3579 | } |
3464 | } | 3580 | } |
3581 | |||
3582 | /* ------------------------------------------------------------------------- | ||
3583 | ビデオライブラリページ | ||
3584 | ------------------------------------------------------------------------- */ | ||
3585 | .videos-custom h5 { | ||
3586 | padding-left: 0; | ||
3587 | font-size: 1.125rem; | ||
3588 | background: none; | ||
3589 | } | ||
3590 | |||
3591 | .videos-custom-item-wrapper { | ||
3592 | display: flex; | ||
3593 | flex-wrap: wrap; | ||
3594 | justify-content: space-around; | ||
3595 | } | ||
3596 | |||
3597 | .videos-custom-item-wrapper:before { | ||
3598 | content: ""; | ||
3599 | display: block; | ||
3600 | min-width: 190px; | ||
3601 | width: 30%; | ||
3602 | height: 0px; | ||
3603 | order: 1; | ||
3604 | } | ||
3605 | .videos-custom-item-wrapper:after { | ||
3606 | content: ""; | ||
3607 | display: block; | ||
3608 | min-width: 190px; | ||
3609 | width: 30%; | ||
3610 | height: 0px; | ||
3611 | } | ||
3612 | |||
3613 | .videos-custom-item { | ||
3614 | min-width: 190px; | ||
3615 | width: 30%; | ||
3616 | margin-bottom: 16px; | ||
3617 | } | ||
3618 | |||
3619 | .videos-custom-item-title { | ||
3620 | font-size: 1.125rem; | ||
3621 | } | ||
3622 | |||
3623 | .videos-custom-item-explanation { | ||
3624 | font-size: 1rem; | ||
3625 | } | ||
3626 | |||
3627 | /* ビデオライブラリページ レスポンシブ*/ | ||
3628 | @media (max-width: 900px) { | ||
3629 | .videos-custom-item { | ||
3630 | width: 45%; | ||
3631 | } | ||
3632 | .videos-custom-item-wrapper:before { | ||
3633 | width: 45%; | ||
3634 | } | ||
3635 | .videos-custom-item-wrapper:after { | ||
3636 | width: 45%; | ||
3637 | } | ||
3638 | } | ||
3639 | |||
3640 | @media (max-width: 550px) { | ||
3641 | .videos-custom-item-wrapper { | ||
3642 | display: block; | ||
3643 | } | ||
3644 | |||
3645 | .videos-custom-item { | ||
3646 | height: auto; | ||
3647 | width: 100%; | ||
3648 | padding-bottom: 8px; | ||
3649 | border-bottom: #003894 4px solid; | ||
3650 | margin-bottom: 24px; | ||
3651 | } | ||
3652 | |||
3653 | |||
3654 | .videos-custom-item-title { | ||
3655 | font-size: 1rem; | ||
3656 | } | ||
3657 | |||
3658 | .videos-custom-item-explanation { | ||
3659 | font-size: 0.875rem; | ||
3660 | } | ||
3661 | } | ||
3662 | |||
3663 | /* ------------------------------------------------------------------------- | ||
3664 | フォトライブラリ (メニュー(記事一覧)) | ||
3665 | ------------------------------------------------------------------------- */ | ||
3666 | .blog.photos-custom .items-leading { | ||
3667 | display: flex; | ||
3668 | align-items: flex-start; | ||
3669 | flex-wrap: wrap; | ||
3670 | justify-content: space-between; | ||
3671 | } | ||
3672 | |||
3673 | .blog.photos-custom .items-leading > div { | ||
3674 | position: relative; | ||
3675 | width: calc(50% - 16px); | ||
3676 | box-sizing: border-box; | ||
3677 | margin: 0 auto 16px 0; | ||
3678 | } | ||
3679 | |||
3680 | /* 記事本文が表示されないようにdisplay: none; */ | ||
3681 | .blog.photos-custom .items-leading > div > * { | ||
3682 | display: none; | ||
3683 | } | ||
3684 | |||
3685 | /* 記事一覧に必要な要素をdisplay: block; */ | ||
3686 | .blog.photos-custom .items-leading > div .page-header { | ||
3687 | display: block; | ||
3688 | } | ||
3689 | |||
3690 | /* 記事一覧に必要な要素をdisplay: block; */ | ||
3691 | .blog.photos-custom .items-leading > div .article-info { | ||
3692 | display: block; | ||
3693 | position: absolute; | ||
3694 | bottom: -56px; | ||
3695 | right: 0; | ||
3696 | margin: 0; | ||
3697 | padding: 0; | ||
3698 | } | ||
3699 | |||
3700 | /* 記事一覧に必要な要素をdisplay: block; */ | ||
3701 | .blog.photos-custom .items-leading > div .item-image { | ||
3702 | display: block; | ||
3703 | float: none; | ||
3704 | margin: 0; | ||
3705 | overflow: hidden; | ||
3706 | } | ||
3707 | |||
3708 | .blog.photos-custom .items-leading > div .item-image a { | ||
3709 | transition: all 1s; | ||
3710 | } | ||
3711 | |||
3712 | .blog.photos-custom .items-leading > div .item-image a img { | ||
3713 | transition: all 0.5s; | ||
3714 | } | ||
3715 | |||
3716 | .blog.photos-custom .items-leading > div .item-image:hover a img { | ||
3717 | transform: scale3d(1.1, 1.1, 1.1); | ||
3718 | } | ||
3719 | |||
3720 | /* レスポンシブ */ | ||
3721 | @media (max-width: 500px) { | ||
3722 | .blog.photos-custom .items-leading { | ||
3723 | display: block; | ||
3724 | } | ||
3725 | |||
3726 | .blog.photos-custom .items-leading > div { | ||
3727 | width: 100%; | ||
3728 | margin-bottom: 24px; | ||
3729 | } | ||
3730 | |||
3731 | .blog.photos-custom .items-leading > div .article-info { | ||
3732 | right: 6px; | ||
3733 | } | ||
3734 | } | ||
3735 | |||
3736 | /* ------------------------------------------------------------------------- | ||
3737 | フォトライブラリ (記事) | ||
3738 | ------------------------------------------------------------------------- */ | ||
3739 | .item-page.photos-custom .page-header { | ||
3740 | display: block; | ||
3741 | } | ||
3742 | |||
3743 | .item-page.photos-custom > div { | ||
3744 | display: flex; | ||
3745 | align-items: center; | ||
3746 | justify-content: space-between; | ||
3747 | flex-wrap: wrap; | ||
3748 | } | ||
3749 | |||
3750 | .item-page.photos-custom > div p { | ||
3751 | position: relative; | ||
3752 | /* 親要素が最大の幅である840pxのときに幅268pxになる */ | ||
3753 | width: calc(268/840*100%); | ||
3754 | height: 0; | ||
3755 | /* paddingで高さを用意する */ | ||
3756 | /* 自分自身の幅が(840*100%)を基準にしているので、それに対して3:4のアスペクト比になるように高さを用意する */ | ||
3757 | padding-bottom: calc(201/840*100%); | ||
3758 | box-sizing: border-box; | ||
3759 | margin-bottom: calc(16/840*100%); | ||
3760 | overflow: hidden; | ||
3761 | /* border: 2px solid #999999; */ | ||
3762 | background-color: #fff; | ||
3763 | } | ||
3764 | |||
3765 | .item-page.photos-custom > div p img { | ||
3766 | display: block; | ||
3767 | /* 親要素の真ん中に表示 */ | ||
3768 | position: absolute; | ||
3769 | top: 50%; | ||
3770 | left: 50%; | ||
3771 | transform: translate(-50%, -50%); | ||
3772 | width: 100%; | ||
3773 | transition: all 0.5s; | ||
3774 | } | ||
3775 | |||
3776 | .item-page.photos-custom > div p:hover img { | ||
3777 | transform: translate(-50%, -50%) scale3d(1.1, 1.1, 1.1); | ||
3778 | } | ||
3779 | |||
3780 | @media (max-width: 500px) { | ||
3781 | .item-page.photos-custom > div p { | ||
3782 | width: calc(228/470*100%); | ||
3783 | padding-bottom: calc(171/470*100%); | ||
3784 | } | ||
3785 | } | ||
3786 | |||
3787 | /* ------------------------------------------------------------------------- | ||
3788 | フォトライブラリポップアップ | ||
3789 | ------------------------------------------------------------------------- */ | ||
3790 | .item-page.photos-custom #photo-popup-wrapper { | ||
3791 | display: none; | ||
3792 | } | ||
3793 | |||
3794 | .item-page.photos-custom #photo-popup { | ||
3795 | display: block; | ||
3796 | position: fixed; | ||
3797 | top: 50%; | ||
3798 | left: 50%; | ||
3799 | transform: translate(-50%, -50%); | ||
3800 | z-index: 220; | ||
3801 | max-width: 1260px; | ||
3802 | max-height: 90%; | ||
3803 | overflow: auto; | ||
3804 | } | ||
3805 | |||
3806 | .item-page.photos-custom #photo-popup.Vertical { | ||
3807 | width: 60%; | ||
3808 | } | ||
3809 | |||
3810 | .item-page.photos-custom #photo-popup.horizontal { | ||
3811 | width: 90%; | ||
3812 | } | ||
3813 | |||
3814 | .item-page.photos-custom #photo-popup #photo-popup-img { | ||
3815 | width: 100%; | ||
3816 | transition: all 0.5s; | ||
3817 | } | ||
3818 | |||
3819 | .item-page.photos-custom #photo-popup-under { | ||
3820 | display: block; | ||
3821 | position: fixed; | ||
3822 | top: 0; | ||
3823 | left: 0; | ||
3824 | z-index: 210; | ||
3825 | width: 100vw; | ||
3826 | height: 100vh; | ||
3827 | background-color: rgba(255, 255, 255, 0.8); | ||
3828 | } | ||
3829 | |||
3830 | .item-page.photos-custom .popup-button { | ||
3831 | display: flex; | ||
3832 | align-items: center; | ||
3833 | justify-content: center; | ||
3834 | width: 40px; | ||
3835 | height: 40px; | ||
3836 | background-color: rgba(255, 255, 255, 0.6); | ||
3837 | color: #222; | ||
3838 | text-decoration: none; | ||
3839 | z-index: 230; | ||
3840 | border: 1px solid #999; | ||
3841 | transition: all 0.2s; | ||
3842 | } | ||
3843 | |||
3844 | .item-page.photos-custom .popup-button:hover { | ||
3845 | box-shadow: #222 0px 0px 3px 1px; | ||
3846 | margin-bottom: 1px; | ||
3847 | font-weight: bold; | ||
3848 | } | ||
3849 | |||
3850 | .item-page.photos-custom .popup-button:active { | ||
3851 | box-shadow: #222 0px 0px 0px 0px; | ||
3852 | margin: 0; | ||
3853 | font-weight: normal; | ||
3854 | } | ||
3855 | |||
3856 | .item-page.photos-custom #photo-popup-close { | ||
3857 | position: fixed; | ||
3858 | top: 5%; | ||
3859 | right: 5%; | ||
3860 | } | ||
3861 | |||
3862 | .item-page.photos-custom #photo-popup-pre { | ||
3863 | position: fixed; | ||
3864 | top: 50%; | ||
3865 | left: 5%; | ||
3866 | transform: translate(0, -50%); | ||
3867 | } | ||
3868 | |||
3869 | .item-page.photos-custom #photo-popup-next { | ||
3870 | position: fixed; | ||
3871 | top: 50%; | ||
3872 | right: 5%; | ||
3873 | transform: translate(0, -50%); | ||
3874 | } | ||
3875 | |||
3876 | @media (max-width: 800px) { | ||
3877 | .item-page.photos-custom #photo-popup-close { | ||
3878 | right: 0; | ||
3879 | } | ||
3880 | |||
3881 | .item-page.photos-custom #photo-popup-pre { | ||
3882 | left: 0; | ||
3883 | } | ||
3884 | |||
3885 | .item-page.photos-custom #photo-popup-next { | ||
3886 | right: 0; | ||
3887 | } | ||
3888 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -198,6 +198,7 @@ if ($this->params->get('logoFile')) { | ... | @@ -198,6 +198,7 @@ if ($this->params->get('logoFile')) { |
198 | <link rel="stylesheet" href="/templates/protostar/css/print.css" media="print"> | 198 | <link rel="stylesheet" href="/templates/protostar/css/print.css" media="print"> |
199 | <script src="./js/jquery-1.12.4.min.js"></script> | 199 | <script src="./js/jquery-1.12.4.min.js"></script> |
200 | <script src="./js/slick.min.js"></script> | 200 | <script src="./js/slick.min.js"></script> |
201 | <script src="/templates/protostar/js/photo_popup.js"></script> | ||
201 | <link rel="stylesheet" href="./js/slick.css" media="screen" /> | 202 | <link rel="stylesheet" href="./js/slick.css" media="screen" /> |
202 | 203 | ||
203 | <link rel="apple-touch-icon" href="/apple-touch-icon.png"> | 204 | <link rel="apple-touch-icon" href="/apple-touch-icon.png"> | ... | ... |
templates/protostar/js/photo_popup.js
0 → 100644
1 | jQuery(function($) { | ||
2 | /** | ||
3 | * フォトライブラリ用のpopupのためのHTMLをセット | ||
4 | */ | ||
5 | $(document).ready(function() { | ||
6 | const photosCustom = $('.item-page.photos-custom'); | ||
7 | if (photosCustom[0]) { | ||
8 | let photosCustomHtml = ''; | ||
9 | photosCustomHtml += '<div id="photo-popup-wrapper">'; | ||
10 | photosCustomHtml += '<div id="photo-popup">'; | ||
11 | photosCustomHtml += '<img id="photo-popup-img" src="" alt="">'; | ||
12 | photosCustomHtml += '</div>'; | ||
13 | photosCustomHtml += '<a id="photo-popup-close" class="popup-button" href="#">×</a>'; | ||
14 | photosCustomHtml += '<a id="photo-popup-pre" class="popup-button" href="#"><</a>'; | ||
15 | photosCustomHtml += '<a id="photo-popup-next" class="popup-button" href="#">></a>'; | ||
16 | photosCustomHtml += '<div id="photo-popup-under">'; | ||
17 | photosCustomHtml += '</div>'; | ||
18 | photosCustomHtml += '</div>'; | ||
19 | photosCustom.append(photosCustomHtml); | ||
20 | } | ||
21 | // 自動生成されたp要素を削除 | ||
22 | let $imgWrppers = $('.item-page.photos-custom > div p'); | ||
23 | for (let i = 0; i < $imgWrppers.length; i++) { | ||
24 | // 子要素が空の場合削除(自動生成されたp要素は子要素が入っていない) | ||
25 | if ($imgWrppers[i]['children'].length === 0) { | ||
26 | $('.item-page.photos-custom > div p').eq(i).remove(); | ||
27 | } | ||
28 | } | ||
29 | }); | ||
30 | |||
31 | /** | ||
32 | * 画面サイズが4:3より縦長の場合は、写真を画面幅いっぱいに表示する。 | ||
33 | */ | ||
34 | function setPopup() { | ||
35 | const winW = $(window).innerWidth(); | ||
36 | const winH = $(window).innerHeight(); | ||
37 | // 画面表示領域のアスペクト比を取得 | ||
38 | const asp = winH / winW; | ||
39 | if (asp < 0.75) { | ||
40 | $('#photo-popup').removeClass('horizontal'); | ||
41 | $('#photo-popup').addClass('Vertical'); | ||
42 | } else { | ||
43 | $('#photo-popup').removeClass('Vertical'); | ||
44 | $('#photo-popup').addClass('horizontal'); | ||
45 | } | ||
46 | } | ||
47 | |||
48 | /** | ||
49 | * 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、 | ||
50 | * popupの制御を行う関数の実行。 | ||
51 | */ | ||
52 | $('.item-page.photos-custom > div p').on('click', function() { | ||
53 | // クリックされた画像のインデックス番号を取得 | ||
54 | let index = $('.item-page.photos-custom > div p').index(this); | ||
55 | // 画像の数を取得 | ||
56 | const imagesLength = $('.item-page.photos-custom > div p').length; | ||
57 | changePopup(index, imagesLength); | ||
58 | // popupで表示させる画像URLを取得 | ||
59 | const src = $(this).children('img').attr('src'); | ||
60 | const $img = $('#photo-popup-img'); | ||
61 | // popupに画像URLをセット | ||
62 | $img.attr('src', src); | ||
63 | setPopup(); | ||
64 | $(window).resize(function () { | ||
65 | setPopup(); | ||
66 | }); | ||
67 | setTimeout(function () { | ||
68 | // popupの表示 | ||
69 | $('#photo-popup-wrapper').fadeIn(); | ||
70 | // popupのみスクロール可とする。 | ||
71 | $('body').css('overflow','hidden'); | ||
72 | }, 50); | ||
73 | setTimeout(function () { | ||
74 | popupScrollSet($img); | ||
75 | }, 100); | ||
76 | }); | ||
77 | |||
78 | /** | ||
79 | * ポップアップの状態の制御 | ||
80 | * ・ 画像の切り替え | ||
81 | * ・ ポップアップの表示、非表示 | ||
82 | * | ||
83 | * @param {*} index クリックされた画像の親要素の中での順番 | ||
84 | * @param {*} imagesLength 画像のインデックス番号の最大値を取得 | ||
85 | */ | ||
86 | function changePopup(index, imagesLength) { | ||
87 | $('#photo-popup-pre').off('click').on('click', function() { | ||
88 | const $img = $('#photo-popup-img'); | ||
89 | let src = ''; | ||
90 | // 透明にする | ||
91 | $img.css('opacity',0); | ||
92 | if (index === 0) { | ||
93 | index = imagesLength - 1; | ||
94 | src = $('.item-page.photos-custom > div p').eq(imagesLength).children('img').attr('src'); | ||
95 | } else { | ||
96 | index--; | ||
97 | src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src'); | ||
98 | } | ||
99 | setTimeout(function () { | ||
100 | // transitionで透明になりきった時点で画像の差し替えを実行 | ||
101 | $img.attr('src', src); | ||
102 | }, 400); | ||
103 | setTimeout(function () { | ||
104 | popupScrollSet($img); | ||
105 | }, 500); | ||
106 | setTimeout(function () { | ||
107 | $('#photo-popup').css('display',''); | ||
108 | $img.css('opacity',''); | ||
109 | }, 600); | ||
110 | }); | ||
111 | |||
112 | $('#photo-popup-next').off('click').on('click', function() { | ||
113 | const $img = $('#photo-popup-img'); | ||
114 | let src = ''; | ||
115 | // 透明にする | ||
116 | $('#photo-popup-img').css('opacity',0); | ||
117 | if (index === imagesLength - 1) { | ||
118 | index = 0; | ||
119 | src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src'); | ||
120 | } else { | ||
121 | index++; | ||
122 | src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src'); | ||
123 | } | ||
124 | setTimeout(function () { | ||
125 | // transitionで透明になりきった時点で画像の差し替えを実行 | ||
126 | $img.attr('src', src); | ||
127 | }, 400); | ||
128 | setTimeout(function () { | ||
129 | popupScrollSet($img); | ||
130 | }, 500); | ||
131 | setTimeout(function () { | ||
132 | $('#photo-popup').css('display',''); | ||
133 | $img.css('opacity',''); | ||
134 | }, 600); | ||
135 | }); | ||
136 | |||
137 | $('#photo-popup-close').off('click').on('click', function() { | ||
138 | $('#photo-popup-wrapper').fadeOut(); | ||
139 | $('body').css('overflow',''); | ||
140 | }); | ||
141 | |||
142 | $('#photo-popup-under').off('click').on('click', function() { | ||
143 | $('#photo-popup-wrapper').fadeOut(); | ||
144 | $('body').css('overflow',''); | ||
145 | }); | ||
146 | } | ||
147 | |||
148 | /** | ||
149 | * 画像が縦長の場合、ポップアップ表示の際にスクロール値を画像の縦中央にセットする。 | ||
150 | * @param {*} $img ポップアップに表示している画像 | ||
151 | */ | ||
152 | function popupScrollSet($img) { | ||
153 | const imgHeight = $img[0].naturalHeight; // 画像の本来の高さ | ||
154 | const imgWidth = $img[0].naturalWidth; // 画像の本来の幅 | ||
155 | if (imgHeight > imgWidth) { | ||
156 | const wrapperWidth = $('#photo-popup').width(); // 画像の包括要素の幅 | ||
157 | const scaleW = wrapperWidth / imgWidth; // 画像の横幅の縮尺比率 | ||
158 | const scrollTop = imgHeight * scaleW * 0.25; // スクロール位置(画像の縮尺後の高さ×25%) | ||
159 | $('#photo-popup').scrollTop(scrollTop); | ||
160 | console.log('test'); | ||
161 | } | ||
162 | } | ||
163 | }); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or sign in to post a comment