I am new to PHP and working for one small project. I want vertical image scroller. All images are fetching from database (sql). the problem is after the last image there is blank white space. this white space is visible till the last image reached to the TOP. I want continuous scrolling. after last image, first image should be in queue . Please help
Such UI effect should be taken care of on client-side using some jQuery plug-in such as Vertical Scrolling Image Gallery with jQuery and jQuery UI - Scroll Slider
Related
I'm using Ckeditor and Responsive filemanager. I want that uploaded images were responsive. But when I upload an image, and see it on the article page, it isn't responsive. Even the image goes beyond div. How can I make it responsive?
I find the solution. When adding image to ckeditor just need in ckeditor property window. Instead of pixels use percent.
Screenshot
http://dev.goforadventure.com/?post_type=trips&p=108
Hello,
Please squeeze the browser closer together until you see the accordion form with the little arrows to the right.
There is a div with a featured background image above the set of tabs (this is Wordpress)
When the tabs are closed, the width of that image div depends on how much space the post title/h1 above it is taking - if I make that font size larger, the picture will stretch larger with it.
If you open the first or last tabs, they have a large amount of text in it - this also causes more of the photo to show.
I am assuming because the div has width:auto applied to it, it isn't showing that much background because the content in the accordions are hidden by default.
Any idea to trick the image div into thinking theres more space there so the image and accordion tabs will stretch across the entire browser while theyre closed?
Thanks so much!
If you remove the width:auto on the div that has the image and set it to 100%, you will notice nothing happens. Then we look at the container element of that div, the one that has id="content" and role="main" That div has float:left. Remove the float in your media queries, and it will show as you want.
I am not sure if this is possible or not, but I am trying to create an effect where when you mouse over an image that is the creation of multiple images overlapped with each other (images would be set with some opacity), I display that section of the image clearer than the other.
Hard to explain, but here a few examples
This image:
is the creation of all those images overlapped (each image is on top of the previous)
When I mouse over the final image I want to be able to "highlight" the part of the image that corresponds to that section of the image in the image itself
Something I was thinking to do is to just show the main image with opaque set, when the user mouse over it, grab the coords, check against all of the images (that cannot be more than 25) see if those coordinates are matching with a non "transparent" pixel and display such image on top of the main to give an "highlighted" effect, but the final images are about 400x200 and create an array of all the pixels on the fly when displaying the page is not realistic for a server that have thousands of hits per hour/minutes. Save this array in a database is not realistic as well as the size of the image might change depending on the page and we currently have 1.3milions final images each one being on average circa 10 broken down images
A possible solution is to create custom SVG overlays for each sub-image. Upon an onmouseover event, you'd decrease the opacity of the SVG element, making the below image more visible.
Checkout this tool for creating SVGs.
$("img").css("opacity","0.8");
$("img").mouseover(function()
{
$(this).css("opacity","1.0");
});
$("img").mouseout(function()
{
$(this).css("opacity","0.8");
});
For the effect of segmenting the image, try using an image map:
http://www.javascriptkit.com/howto/imagemap.shtml
Opacity of image maps is supported:
http://www.thehelper.net/threads/can-i-use-opacity-on-imagemap.57999/
Edit:
To achieve the hovering effect, try loading them into a canvas using Fabric JS, here is a demo:
http://fabricjs.com/hovering/
Abandoned the project, the ony solution is SVG but it nos possible at this stage as some browsers/OS do not support fully them
I know that the question I have is quite complex, and I really hope someone can help me. I have created an image gallery qih jquery and php. Firstly I am grabbing all the image names from a MySql database, then taking them from the server folder and resizing them with php. It creates the thumbnails, then I created a pop up window with jquery which shows the image in large. After that I place a previous and next button and told jquery to grab the array of image results from php and echo them into the jquery using json. Then it goes through the array to create the next and previous effect. I then centered each individual image when the next and previous button were clicked. When you load the first and second picture it is not centered and it goes to the right. I CAN NOT figure out why this is happening. I really need some help here. There is too much code to post here so I am giving you the website and you can see pretty much everything in the source code. Remember that I am using php so if you are wondering how it is iterating through the pictures that why. Thanks if anyone can help me at all.
http://www.oceanphotostudio.com/test/collection/before-and-after.php
The reason it's getting offset is that the margins that center the popup div are being calculated before the image is loaded. Notice that on the first click, it will have margins of -37px and -30px. After one image is loaded, calling another one will use the width and height of the last image that was loaded in, which is why you can get unpredictable results.
Take a look at JQuery's load event handler for information on how to create a callback to resize after the image has been set to load, rather than before.
Your description totally overcomplicates the issue. Browser could care less how you generate the array or html on server, or what language it is
Your position problem is a simple css issue. You've set the top and left of your popup to 50%. This means top left corner of popup will start at dead center of page, and go right and down from there.
Use a browser console to inspect the html elements and the css rules that apply to them and adjust accordingly. WIthin the console you can make live edits to see impact of the adjustments in real time
I'm trying to make a script that zooms into an image. This is the page:
http://vermilionsite.com/phone/?id=1
Click the first option, then choose a colour, then mouseover the image. It uses the original image. How can I make it so that the zoom uses the new coloured image?
The jQuery function you have just adds a div with a background over the image, while the original mouse overlay function that zooms your image moves the 'bg-iphone.png' background around in an overlay, so the logic is somewhat flawed as you would also need another background image with the same color on the original div so a bg-iphone.png modified with the same color. I guess you could modify the script that returns your color overlay to also return a modified image and change the background of the image from bg-iphone.png to a png with the same color as the overlay.
Or you could have three modified pngs with the same colors you need that would change the background image in the select function.
Hope this helps.
use this http://www.userdot.net/files/jquery/jquery.loupe/demo/