Скрипт портфолио для сайта – очень красивое!

Добрый день мои дорогие друзья. hello

Сегодня мы попробуем установить к себе на сайт скрипт очень красивого портфолио. ok Сразу хочу заметить, что не стоит ограничиваться одним портфолио. Лично я планирую использовать этот скрипт в качестве каталога шаблонов для своих сайтов.

Я нашел этот скрипт пару дней назад в интернете, вот по этому адресу: классное портфолио.

Там же есть кнопка демо, для просмотра в живом виде, а вот как я осуществил каталог шаблонов при помощи этого у себя:



Хотите такой же? Тогда смотрим урок ниже. wink



вместе с видео включены архивы скрипта портфолио и моих картинок


В этом уроке я Вам покажу:

  • Как изменить шапку и поставить в ней свой логотип.
  • Как изменить общий фон.
  • Как изменить пункты меню и заводить новые.
  • Как менять сами картинки.
  • Как изменить подвал.

Всего получилось 17 минут практического видео.


PS: если возникнут вопросы – задаем их в комментариях.

PSS: не забываем нажимать на кнопки ниже, что бы поделиться этим классным скриптом портфолио со своими друзьями! happy


Комментариев: 52 RSS

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Комментариев: 52
  •  Евгений Шаповалов | 28 марта 2012 в 18:56:37

    Скрипт супер!Я тоже в восторге от увиденного!smile

    Пока что мне такой не нужен, но очень понравилось само оформление и эффекты перемещения элементов.

  •  Архип Report.EffectiveWebSites.Ru | 28 марта 2012 в 19:17:40

    На iPad футер фиксирован, скоробится вместе со страницей

  •  Серёга | 28 марта 2012 в 20:24:39

    Ну это задумка автора, он и есть фиксированный.

    Убрать свойство в CSS и все будет ок.

  •  Alexander Snegovoy | 28 марта 2012 в 21:34:11

    Серёга привет!smile Скрипт довольно таки интересный, но туда бы еще впихнуть штуку типа галереи, в смысле что бы после нажатия на миниатюру изображение увеличивалось, или же показывалась демка, и это было бы достаточно интересно. Кстати если потребуется то могу организовать такое делоsmile и если одобришь то зальёшь, ок?

  •  Серёга | 28 марта 2012 в 21:59:45

    Ну мне такое дело в принципе не надо, мне нужны будут тупо ссылки, что уже я сделал.

    Но твой вариант скрипта портфолио тоже интересен.

    Единственно что у нас не получается, это поставить другой скрипт, который при наведении мыши затемняет картинку и выводит текст.

  •  Karabashka | 29 марта 2012 в 14:04:37

    Как классно! Большое спасибо. Хочу попробовать сделать на все свои страницы продающие и подписные.Как витрина в магазине. Супер! Бесконечно благодарна тебе.Купила твой новый курс, но еще не изучала.

  •  Серёга | 29 марта 2012 в 19:25:54

    Так пробуй! Ничего сложного там нет.

    Ты главное отзыв не забудь мне прислать по новому курсу smile

  •  Владимир | 29 марта 2012 в 23:15:21

    Не боюсь повториться: классный скрипт. Спасибо, Серёга, за наводку!

    Скачал вчера. Сегодня провозился с ним часа четыре (в основном, рисунки заняли время), сделал приятный альбомчик для внутреннего пользования.

    Одна беда: в строках таблицы при просмотре почему-то не выводится значение из-под alt.

    Мелочь, а не приятно.

    Может, просветишь чайника?

  •  Александр | 29 марта 2012 в 23:19:51

    title пропишите.

  •  Серёга | 30 марта 2012 в 08:29:08

    Владимир - alt - это обязательный атрибут, который используется, если картинка не загружена, или у человека проблемы со зрением и он пользуется интернетом при помощи специальной программы, которая озвучивает.

    Картинки она озвучивает именно через этот атрибут.

    И он не делает всплывающие подсказки.

  •  Владимир | 30 марта 2012 в 09:10:20

    Что-то вы, друзья, меня пу*аете...

    В тренинге "5+" такая же строка (например, )

    всплывающую подсказку выводит.

    В чём разница, почему здесь эта же конструкция ()

    не выводит?

    ЗЫ. слово "пу*аете" читайте, как Вам угодно, оба варианта правильные grin

  •  Владимир | 30 марта 2012 в 09:14:26

    Ну, вот... код строк не вставился.

    Попробую повторить:

    <img src="image/logo-time.png" width="64" height="64" alt="На главную">  выводит.
    А в скрипте эта же конструкция 
    
    <img src="assets/img/shots/6.jpg" alt="Посмотреть">

    не выводит подсказку.

    Почему?

    Или доцент тупой?

  •  Серёга | 30 марта 2012 в 12:42:52

    В тренинге 5+ я объяснял, что всплывающие подсказки выводит только атрибут title.

    Возможно - ты слишком узко смотришь на код wink

    Скорее всего, картинка, которую ты привел, находится в ссылке, а уже ей прописан атрибут title.

  •  Владимир | 2 апреля 2012 в 12:47:27

    Спасибо за разъяснения по подсказкам. Картинка действительно в ссылке.

    Но это ещё не всё. Обнаружилась другая бяка: когда открываешь с сайта скрипт в мозилле, он почему-то показывает кодировку Win-1251, соответственно, кракозябры в заголовке.

    Хотя при просмотре тем же мозиллой со своего компа, всё нормально.

    TopStyle тоже показывает, что кодировка у файла стиля и индексного - UTF-8.

    Тогда где собака зарыта?

    Гугл читает всё, как и положено...

    Надеюсь, не слишком озадачил?

  •  Серёга | 2 апреля 2012 в 19:50:04

    Хм... очень похоже на глюк.

    Попробуй сохранить страничку в UTF-8 через PSpad.

    Возможно топстиль тупит.

    И еще, у тебя эта страничка где? На локалке в отдельной папке? Или на сайте?

  •  Владимир | 3 апреля 2012 в 18:46:00

    Добрый вечер, Серёга!

    Извини, если помнишь, у меня не очень со временем...

    Поэтому разрывы между письмами.

    Сохранял в TopStyle и Notepad++

    Всё равно где-то проблемка. Скрипт у меня для тестирования заброшен в папку на сайте. Ссылку могу дать, но не для всех (там личный альбом). Если есть время глянуть, дай знать.

    Сброшу либо на твою почту, либо "в домашку для 5+" (если она ещё открыта.

  •  Серёга | 3 апреля 2012 в 20:24:49

    Зачем в домашку.

    Скидывай мне ссылку.

  •  Tatyana | 6 мая 2012 в 16:23:12

    Очкнь красовое портфолио. А как скачать урок по доработке под свои нужды?

  •  Серёга | 6 мая 2012 в 17:02:07

    Его только если смотреть онлайн, или, если можешь скачать с ютуба - скачивай. Там прога вроде специальная нужна.

  •  Tatyana | 9 мая 2012 в 16:35:10

    Я правельно поняла: Если добавить к имющимся понктам еще несколько

  •  Серёга | 9 мая 2012 в 17:51:47

    то они появятся в списке.

  •  Tatyana | 9 мая 2012 в 20:34:51

    LOL

  •  Tatyana | 14 мая 2012 в 14:32:18

    Сергей, подскажите, пожалуйста, как сделать активную ссылку из картинки портфолио. Написала как в WP

    но не срабатывает.Что не так?grrr

  •  Tatyana | 14 мая 2012 в 14:33:20

    Кусочек с кодом не отобразился

  •  Серёга | 14 мая 2012 в 14:36:31

    Обрамите картинку в ссылку, и все.

  •  Tatyana | 14 мая 2012 в 14:45:35

    Как? Я Чайник. Сбросте на почту пример.здесь HTML не пишиться. [email protected]

  •  Tatyana | 14 мая 2012 в 14:47:15

    Я только что на вашем форуме писала. Можно там ответить. Спасибо.

  •  Виктор | 14 июля 2012 в 23:32:44

    Скрипт хороший спора нет.Только HTML5 ещё сыроват,не будет работать в старых Браузерах.

    Вот тут я проводил ождин эксперемент над

    Content Slider ohne JavaScript nur CSS3

    писаный только на HTML5 и CSS3

    https://you-big-blog.com/Follow/pure-css-slider.html

    В Мозиле работает а в Опере уже нет.

    Ну а сам портфолио хороший ,только для переленковки.

    Alexander Snegovoy прав насчёт тубов.

    С Уважением Виктор

  •  Tatyana | 15 июля 2012 в 14:20:18

    Здравствуйте, Виктор. Я, к сожалению, на английском не читаю. По этому ваши статьи прочесть не смогла. У меня вопрос. Можно ли переделать скрипт на бесконечное число картинок? Идея сделать из него меню сайта. У меня обзор обучающих курсов https://www.linkbez.com.ua/ Если да, то не смогли бы вы это сделать? Я в Джава профан, да и в HTML тоже. Свой сайт сделала исключительно как обезьяна по бесплатному курс.

    Пробовала написать на почту, указанную на вашем сайте, не прошло. Пробовала связаться ч/з коменты - пишит спам. Упс. Может здесь отзоветесь.

  •  Серёга | 16 июля 2012 в 10:34:53

    Всему свое время.

    Прогресс не стоит на месте...

    И старых браузеров становится с каждым разом все меньше и меньше, а поддерживающих новые web-технологии - все больше и больше wink

  •  Виктор | 16 июля 2012 в 13:52:29

    Здравствуйте Tatyana ,число картинок в Slider безгранично, и размер

    подгоняется через стили,но вот для меню сайта идея думаю не очень.

    Для обзора нужных статей предназначен,допустим как головной баннер перед темами.А сайтец на ВП Ваш.(мой сайтец на немецком)

    Tatyana свяжусь с Вами на Вашем сайте.

    Виктор

  •  Мила | 24 октября 2012 в 11:32:04

    Здравствуйте, Сергей!

    Главные вопросы для полного чайника:

    1. Как всё это установить на сайт (сайт работает на MaxSite CMS)?

    2. Как привязать к картинкам ссылки на конкретные статьи? Щелкнул по картинке – и статья?

    Буду благодарна за подробный ответ.

  •  Серёга | 25 октября 2012 в 21:40:42

    1. Создаете на сайте папку, там размещаете файлы портфолио. Затем просто указываете ссылку на портфолио.

    2. Обрамите картинки в тег a, и укажите ссылки.

  •  Сергей | 1 декабря 2012 в 19:13:38

    ЧТо то у меня не получилось прикрутить ровно скрипт к сайту. Видимо кривизна рук зашкаливает. Может кто нибудь из разбирающихся объяснить что я не так сделал?

    https://mandrogi.info/port/

  •  Аноним | 1 декабря 2012 в 19:45:01

    Такое впечатление, что не все картинки вы поменяли. И что еще, кроме фотографий пытались поменять? По исходному коду не видно.

  •  Сергей | 1 декабря 2012 в 20:03:28

    пардон, уже нахимичил, и перенес папку. она тут: https://mandrogi.info/portfolio/

  •  Сергей | 1 декабря 2012 в 20:06:30

    Картинки я не все поменял, решил сначала прикрутить его, что бы убедиться что все будет функционировать, и со второй попытки перенес вроде нормально, но слетели картинки находящиеся в стилях, такие как фон и т.д. Ссылка сообщением выше.

    зы символы в капче третий раз подряд одни и те же выпадают

  •  Сергей | 1 декабря 2012 в 20:26:16

    Все, разобрался. одну букву в адресе перепутал. Всем спасибо, Сергею особенно

  •  Серёга | 3 декабря 2012 в 14:20:48

    Мне то за что? smile

  •  Лёша | 1 марта 2013 в 09:01:15
    [image=https://expert-css.com/uploads/2012/portfolio.jpg Скрипт портфолио – очень красивое!]https://expert-css.com/uploads/2012/portfolio.jpg[/image]

    Обращаю ваше внимание на косячёк

  •  Лёша | 1 марта 2013 в 09:04:51

    И ссылочки на шаблоны уже не работают

  •  storm | 23 июня 2013 в 22:52:21

    Отличный ресурс, спасибо. В закладки.

  •  azudaryf | 16 мая 2017 в 10:52:36

    kankusta duo opinie

  •  ylopodij | 18 мая 2017 в 05:08:59

    Hemoroidy wówczas problem,który ogarnia jeszcze wiekszą część polaków. co to sa hemoroidy zdjęcia violetty castillo ,stanowi więc te nader dotkliwy wywiad wsród niemowląt. Stąd spośród fora dr medicus dowiesz się jak owocnie z nimi zabiegać.

  •  acajixaxi | 19 мая 2017 в 04:05:43

    Z starodawna przechodziłaś przedmiot spośród łamliwymi paznokciami. Wierzyła bogactwo witamin zaś anormalnych suplementów,niestety zero nie wspierało . Z efektywnego terminu przystosowuje niekonwencjonalne nawyki na poprawe jakości bliskich paznokcii natomiast ewolucyjnie wyczuwam rezultaty. Całokształt na problem onycholiza paznokcia

  •  atisah | 24 мая 2017 в 00:48:01

    woozworld

  •  owyzef | 24 мая 2017 в 14:54:09

    woozworld game

  •  ovinusu | 3 июня 2017 в 10:25:34

    Skoro czerpiesz sondaże spośród słuchem także pragnął opycha rozwiazać toż potrafię przepisać specyfik activlan forum. Przez stawianie tegoż suplementu mój zmysł doniośle się uaktualnił.

  •  ukyxyl | 4 июня 2017 в 07:41:12

    Skoro bierzesz defekty spośród zmysłem tudzież raczył obżera rozwiazać toż mogę powierzyć lek activlan skład. Poprzez podawanie aktualnego apendyksu mój słuch doniośle się przestawił.

  •  uzomada | 5 июня 2017 в 15:15:38

    drivelan skład

  •  iveqely | 6 июня 2017 в 02:08:53

    drivelan forum