abhiomkar / portfolio-js Goto Github PK

Great plugin I like the mobile functionality!
However I had a question:

When the slide reaches the last image, is there a way to make the left border of the image scroll all the way to the left? Otherwise, the slider hits a "wall" at the right border of the last image. Can it continue to the the left, displaying blank space on the right?

This way if I have loop: set to true, it will slide all the way to last image before looping to the beginning.

Thanks in advance!

It works in all browsers but I.E. not load the images and therefore does not appear scroller. Any solution?

Im using JQ 3.3.1 and Im getting a warning and error.

Warning: jquery-3.3.1.min.js:2 jQuery.Deferred exception: portfolioEl.querySelector is not a function TypeError: portfolioEl.querySelector is not a function
at new Portfolio (https://unpkg.com/[email protected]/dist/portfolio.umd.js:26:31)
at HTMLDocument. (http://localhost/mysupport/customers/customers.html:408:9)
at l (http://localhost/mysupport/js/jquery-3.3.1.min.js:2:29375)
at c (http://localhost/mysupport/js/jquery-3.3.1.min.js:2:29677) undefined

Error: jquery-3.3.1.min.js:2 Uncaught TypeError: portfolioEl.querySelector is not a function
at new Portfolio (portfolio.js:14)
at HTMLDocument. (customers.html:408)
at l (jquery-3.3.1.min.js:2)
at c (jquery-3.3.1.min.js:2)

Hello
Is there a way to do the height of the image covers the entire browser window
I think the default height is 500px
when i set auto and 100% it doesn't work, vertical and horizontal images are not on the same size
(by the way, with the offsetLeft function, the vertical image are not very centered, but thanks you)

Merci

I seem to be having an issue with safari when I set a max-height in (px) and set width to auto in my style sheet for the portfolio images. When using Firefox and Chrome the images display correctly but safari sets the correct height but keeps the images original width (stretching the image)?

I am using media queries to allow the images to be a little more responsive to various screen sizes.

Do you happen to know where I may look in the portfolio.js doc to remedy this or do you know of a possible solution?

I'm trying to build a horizontal scroll portfolio gallery, and only my first image loads. This is the page:
http://www.jeaninebrito.com/msbeltempo/?page_id=8

I have 6 images uploaded via Wordpress, and upon viewing the page source the proper image url shows in the code. It just doesn't load in the plugin.

Can anyone help me out? Thanks!

Hi ! You plugin very helpful, but
When I dragging scrollbar to middle of slide (or anywhere else) and then I press arrow button,Scrollbar alway jump to current position.

Ex. I start at first image,and then I dragging to last image,I will can't press left arrow button(because current position at first image),if I press right button slide will jump to second image.
How to fix it?

Hope you understand my question.
ps.Sorry for my english.
Thank!!

I don't know if it a portfolio.js but to fix it I have to start somewhere:
On my web site I am using portfolio in a iframe because I need the gallery always centered,
This is working perfect on a pc but not when accessing the site with an i.e. iphone. Here it is not possible to scroll the gallery to the right.
When open the gallery directly without iframe it is working properly.
Example:
http://olafrayermann.de/ads_campaigns.html klick on any picture: Not working on iphone
http://olafrayermann.de/gallery1.html: is working.
Is it my approach? Any known problem in portfolio.js?
Regards,
Michael

Hi!

thank you for this amazing plugin! I just have a small issue:

I've a drop down menu which seems to not compatible with jquery 1.8.1, it works on 1.8.16 but in that case portfolio doesn't work. Any idea of how I can manage that things?

I've try to move the jquery 1.8.1 call from the header to the end of my html, in that case the the drop-down menu issue is solve but "portfolio" stop working. I'm not a professional web designer so I would be really grateful if you could give help.

Best Regards

Alekz

Hey,
Thanks for creating such a great plugin. I have one issue though...
Everything is working fine when I print a list of 's but when I wrap tags around it, the -prev- and -next- buttons dont work anymore ().
I tried working with z-index and I even put the -prev- and -next- elements outside the gallery, but no luck.
Any ideas?
Regards

Is there a way to deal images that are nested in side other dom elements. Such as an array of DL/DT tags? This is how wordpress presents it's image galleries.

Help!

Hi! I think your tutorial is great and want to say thank you! However, one thing I noticed which is very important, is that when you have a form on the same page, the letter 'K' doesn't type. Simply nothing happens when i type 'k". Every other letter, number, and symbol works fine! so I don't get it. No, my keyboard is not broken, and yes other forms on other sites work fine. Not sure if this helps, but by deleting some of the js files you attached on the page, I noticed my form gets fixed when these attached images are deleted

from the head.

I thought maybe some of my code was conflicting with your code, but by using google inspect, I added a form to 'portfoliojs.com' to see what would happen. And it seems that the same thing is happening on your page. I really don't know any javascript, just html and css. So I really rely on tutorials like this, I just have no clue what to do when an issue like this happens. If there's something you can do, that'd be amazing! Thanks again!

When I put this script on website, it conflicts with the search input.
The input just stops registering the "k" letter. Not sure whether it affects any other keys, I'm not aware of it.
The moment I delete the script line in header, everything works fine.

Hi Abhinay,

I wonder if there is a way to make portfolio.js act more responsive.
I want something like a layout-switcher.

Is there a way to destroy portfolio.js by a special window-width and display the images underneath each other? And is there a way to re-init portfolio.js when the window-width grows back.

Thank you :)

What would be the best way to implement a lightbox effect when an image is clicked on to open in a larger window?

Thanks!
Patrick

Is there a way for the left/right arrows to align at the far left and right inside of a div that isn't the full width of the screen? Right now mine are positioned absolutely based on the size of the screen.

Thanks,
Patrick

Hello, I want to implement your plugin with instafeedjs. The problem is that when testing your demo index file in the master folder, if I change the img data-src for img src, the images don't load. And in instafeedjs, the images load with img src...

Is it there a way to make portfoliojs to load images using img src only?

Thank you.

This line of code:

case 75:case 37:r.navigation.hide(),r.prev(),t.preventDefault();

... particularly "case 75", was preventing the letter "k" from being used in my email contact form fields. I commented it out and all seems to be working fine now.

What is this line of code for? And how can I properly fix it?

Thanks,
Dave

Best to clean up debug code before pushing. Potentially causes whitescreens in some browsers if no shim is included.

Hi,
I've done the offsetLeft option but my active image is still not centering. Can anyone help? Here is my link.
http://www.leoevidente.com/test-gallery

Thanks!

Hi, I am using this as part of a WordPress theme. I am trying to extract the featured image from posts and insert it as an image to the portfolio slider.

I have tested by using <img data-src="image.png" /> and the images load no problem however when I use the WordPress loop to get the featured image tag the images don't load. Although the posts have loaded, there is a broken image icon and the source of the image is undefined.

Just to make sure there wasn't a problem with the loop code I tested it by placing it outside the <div id="gallery"> tags and the images loaded. So it seems to be that there is a problem using the loop inside the gallery div where the images source comes up as undefined. Here is the code:

<div id="gallery">
        <?php   
        $args = array( 'posts_per_page' => 8, 'order'=> 'DESC', 'orderby' => 'post_date' );
        $postslist = get_posts( $args );
        foreach ( $postslist as $post ) : setup_postdata( $post ); ?> 
        <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('medium'); ?></a>   
        <?php endforeach; 
            wp_reset_postdata();
        ?>
</div>

I want to be able to change the "arrow-left" and "arrow-right" slide navigation arrows from white to black. The portfolio.js file has a value that is too cryptic for me to figure out. It starts with:

// inline image for arrow-left
background: "url(data:image/png;base64...." (there are several lines of characters after this)

How do I change this; is there an address at jquery.com to create an image code that will render black instead of white? (or another color on hover)

Many thanks in advance!

http://projectnyou.com/izmir/eng/#!portfolio/project/test

this is our website with drag facility on image & text but it's does not working in iframe.

Hey,

Love this script. Well done!

I'm struggling to put the images within a list or show a title beneath each image if the image is wrapped in a div. Is it possible to allow for this as the script is written? It seems to allow the ability to the image in an link, but any other html is doesn't seem to allow.

Thanks for your help!

Hi !

Is it possible to add in a simple way captions on image hover?
The js doesn't allow us to use a div within a figure tag.

Thank you very much for your help.

Hello
I like your plugin, it's very simple to use
Is there a way to have the active image always centered ?
I think it will be great, i try through the css but maybe it's too difficult
Merci d'avance

For some reason, I am not able to make the active image centered. You can see it here:
http://www.jurasakos.hu/new/portfolio/3-jegyes-fotozas

The code I'm using is the following:

<script>jQuery(document).ready(function() {var p = jQuery("#gallery").portfolio({height: '500px', lightbox: true, loop: true, offsetLeft: -320, opacityLightbox: '0.6', showArrows: false}); p.init();});</script>

Thank you very much for your help in advance!

how to make that the active image was centered on the page?
like that demo.diana-1.gophotoweb.com

Hi Abhinay,
Thanks very much for your plugin, it is awesome!

Is there anyway of customising the scrollbar??

Or even making it visible at all times in stead of just when you start scrolling??

Thanks, much appreciated!

Ryan

Hello!

Thanks for nice plugin!

I need to make them clickable (it's just thumbs with links to pages with big photos).

How to do that?..

I replaced <img /> to <a href="#"><img /></a>

It works, but not all... Then I click to gallery-arrow-left or gallery-arrow-right I see nothing, no action... and no errors in console... Please, tell me, how to fix this ?..

http://jsfiddle.net/mH82W/1/
demo here (first 2/3 is ok, last 1/3 is not because of imgs inside of a tags)

Hi Abhinay,
Thanks very much for your plugin which is great!
I would like to know if there is any way to remove the bottom scroll bar.
Appreciate your help.

Cheers,
Don

1.I would like to see the slides centred based on the with of the slide.
2. Touch responsive for mobile devices
3. Circular loop

First, thanks so much for the awesome plugin! It does nearly everything that I need it to. I have an issue dealing with fitting in images that are much taller than they are wide. Basically, the gallery becomes as tall as the tallest portrait photo, which creates a lot of white space for the landscape photos in the gallery. I'm trying to use a conditional jQuery statement to size a portrait photo based on it's dimensions and putting it at line 27 of portfolio.js:

e("#gallery-small img").each(function(i, el)
{
var img = $(el);
var width = img.width()
if (width>790) {
e(this).find('img').css({
display: 'inline-block',
'max-width': 'none',
height: r.height,
width: '50%'
})}
else {
e(this).find('img').css({
display: 'inline-block',
'max-width': 'none',
height: r.height,
width: '24.55%'

This works to resize the images on page load, but then the gallery no longer resizes itself when the browser window size is changed. Do you have any ideas?

Thanks!

I'm not able to use this script with the current wordpress version. I've tried it on two different themes and it only displays the first image and the navigation isn't working. The other images are somehow arranged below the first image but not visible.
I use this code for the integration:

wp_enqueue_script(
    'portfoliojs',
    get_stylesheet_directory_uri() . '/js/portfoliojs/js/portfolio.pack.min.js',
    array(), 2.0, true
); 

My theme is based on Graphy: https://wordpress.org/themes/graphy/
Are there any version conflicts? I don't think its due to CSS.

Thanks!

I would like to add another portfoliojs to same page right below the first one, but it will not allow me to do so. Is there a fix for this??

Hi,
First of all, Portfoliojs is absolutely awesome.

In code for including portfoliojs, you dropped "src=" before the path.

Thanks for building such a great script.

Has anyone else noticed that the scrollbar is really large, but when you click on it and drag it suddenly jumps down to a smaller size? This makes it look really bad, and a static size adjustment through css didn't help any.

I have images setup with varying widths in my div. Is it at all possible to get them to still all center? Like, is there a way to give the image that is in focus auto margins to the left and right?

I can't really get them to do anything but hug the left side of my div.

You can see what I'm talking about here: http://bopratt.com/bopratt

Thanks for the help,
Patrick

Hi, I was curious if it was possible to make this slideshow autoscroll? http://portfoliojs.com

Thanks!
Summer

Hi,

Is there a way to directly ScrollTo an image Id with PortfolioJS ?
If so could you indicate me how to process??

Thanks for the amazing script btw!

Hi Abhi!

Firstly I just wanted to ask if are there any restrictions on using this plug-in on my website. It's what I was looking for, easy and elegant. Really, thumbs up for you!

The point is that I wanted to do some little modifications on it. These are

1. How could I remove the spacing between images? I've been looking the code but no way.... Any ideas?

2. Where should I change the height? On the .js file? The css? or in the html scrip tag? On your web is supposed to be explained but I couldn't manage to do it....

3. And finally, how could I set the scrollbar background to transparent? Do I need to disable the webkit css property?

Many thanks and greetings from Spain!

HP

Hello!

I am very new to web design so this might be a dumb question but I cannot get my images to show up in the gallery. Is there a way I can attach them directly from my images folder instead of going through dropbox?

Thanks,
Caitlin

Hey Abhiomkar!

Thanks for the awesome plugin!

I'm having two issues:

• Centering the main image (setting offset.left to -320 didn't change anything)
• My right arrow refuses to be centered (see image)(https://cloud.githubusercontent.com/assets/9554385/4902353/cf3331e4-6438-11e4-978d-49605c2cb95f.PNG)

This is all without any tinkering. Just copying and pasting the setup from your site. I didn't even add my own images yet. I can't figure out what it is!

Thanks for anyone's time in advance!

When dragging the scrollbar, it jumps back in the other direction upon release. Doesn't seem to happen if only moving scrollbar a small amount.

Hello!
You've made a great plugin with an easy customizing but I can't find how to change spacing between images. I can increase it by using margins in CSS but I can't reduce it to 0. Is it possible to delete spacing?

Thank you

CSS Properties for Webkit Browsers:
-webkit-scrollbar
-webkit-scrollbar-thumb
-webkit-scrollbar-track