We are developing a social networking project, in this project we are adding content , e.g. images , video,audio,link(html).
Currently we are using shadowbox.js to show it.But for better and effectiveness we want to use some other better plugin, or want to make own window for showing images and link.
Please help , what is the best solution for this project.
I want to know this is the white board quesion means programmer.stackexchange question or stackoverflow quesion?
Thanks
There are 31 here:
http://www.dreamcss.com/2009/03/31-mind-blowing-collection-of-jquery.html
You should find one or more that suits your needs.
I would suggest using colorbox.js it can be found here :
http://colorpowered.com/
It is easily styled, comes with a pleathera of options including an image slideshow, can handle iFrames, Ajax content, Images, etc, and comes with a few options for styling to begin with.
Made my own div and use that for displaying content :)
Related
I have met an interesting image gallery transition surfing the web several times and now I'm interested in how such an elegant solution has been made.
Gallery can be found here: http://nullstuff.com/nullfolio/#/portfolio
The desired effect takes place when toggling between 'Everything' and 'Web Design'.
Could it be made purely with CSS?
Based on the app.js source in the page, it's using the jQuery Quicksand plugin.
To create such elegant gallery JQuery can be used.
You can find several JQuery galleries.
Look at this blog, I found http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
I hope it helps.
First of all
It is not possible to add click events in css.
therefore it is javascript
This is known as an image carousel.
I made my own in jquery.
I can give you the source if you want.
Click on the image to see effect and see the url change and press back button.
You will find the previous page loaded with the effect.Moreover the scrollbar(horizontal) hides after poping which i think is made overflow-x:hidden in css.
I found this great tutorial http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/
Its easy to follow but i am getting stuck with the JS because i want to have more than one image on the page.
Can someone assist.
You dont need to edit your script (May be the selector).But you have to set two classes for each of your images, one is for common identity (will be feasible while selecting from Jquery) and the other one is to set unique styles to each pair of your images
DEMO
This is my first question here in StackOverflow, but I have used the site many times, and you always helped me with your answers. Now its time to share my doubt, because I could not find a similar one here.
I have a flash banner rotator in my website, that uses a XML to configure the images and links that will rotate. I don't have acess to the source, because it is a commercial version.
I can not use jQuery to rotate the images, because I have a drop down menu and it always fall behind the banner. I tried z-index but it does not work on IE.
One of the images is to show a video, so, when someone click on it, I want a lightbox to open and play the video (I will use Sublimevideo.com for this)
The XML now is like this:
<slideshow>
<photo image="path/image.jpg" url="link" target="_blank"></photo>
</slideshow>
I need to add a CLASS to this link, because I want it to be opened in a lightbox!!!
So I was wondering to do something like this:
window.location.href='link class="lightbox"';
But this is not a option, it did not worked!
So how can I add a CLASS in the link at the xml file?
I was wondering using javascript, but if you have any other option, it will be GREAT!
Thanks a lot in advance and sorry for my English, I'm from Brazil =P
You could do it with an horrendous jQuery hack:
$('*[href*="path/image.jpg"]').addClass('lightbox');
Of course, if you know what the HTML will look like you could use a far more specific / less ugly selector.
A much better solution would be to add the class on the server, which sounds like it should be possible.
I found the jQuery Gallery View plugin because I was looking for a good way to cycle through pictures including text and one that was well designed. This plugin does not seem to be updated anymore and does not have much documentation so I am having difficulties implementing it. Does anyone have an idea as to how it works?
Thanks in advance for any help you can give.
Heres the code I have now (of course with the pictures at the right locations just not possible to attach in jsfiddle): http://jsfiddle.net/chromedude/GgusY/
Here's a start.
I'm taking a total guess at what your markup is supposed to be, because you were missing a bunch of </div> (close div) tags.
Things I had to change to get it this far:
Download galleryview-2.1.1.zip, and from that file...
Paste in contents of galleryview.css and jquery.galleryview-2.1.1js into the fiddle (normally you'd do this with proper external scripts and stylesheets)
Fix the markup so that all those <div class="panel"> tags are properly closed
Get a copy of jquery.timers-1.1.2.js onto the page
Step 2: got the loader image working by hosting the loader.gif file on imgur and editing the CSS accordingly.
Themes are tougher, because apparently, this genius™ plugin tries to figure out where your themes are hosted based on the location of the <script> tag which was used to load the galleryview plugin code. Absolute genius... </sarcasm>
Check it out →
no more image 404s. Loaded next.gif, prev.gif, panel-nav-next.gif, and panel-nav-prev.gif onto imgur so that jsfiddle can actually get the images.
I had to actually edit the plugin source for this one; if your server has the directory structure that galleryview expects, this should not be necessary.
Now here's the thing
You could keep wrestling with this plugin.
Or, you could use a different one, like Galleria. As far as I can tell from the example you've been trying to assemble, Galleria does all the same stuff. Since Galleria is actively maintained, you should actually be able to use it with a reasonably recent version of jQuery, as well as actually get support for it from the developer.
Get the latest version of jquery gallery view here:
http://plugins.jquery.com/node/7317/release
Then following on from that:
http://jsfiddle.net/chromedude/GgusY/
$('#photos .filmstrip').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100
});
I am new to JavaScript and jQuery. I have to develop a website in which an image gallery with similar effects as in google image search needs to be implemented. I am searching for ready-made scripts to incorporate with my project. Where can I find something like this for free or how would I go about implementing it using JavaScript/jQuery.
Regards
Omayr
This is a pretty specific example, and I would guess most plugins would be more "widgety". If I was creating this I would create the page layout first, wrapping each "page of results" in a single div.
Then when the user clicks "Show More Results" you can use one of jQuery's AJAX methods to load in more "pages" of images.
I assume you have paginate the image search result, you could try by doing:
assign each image in a div tag (e.g
Bind the function by using jquery ".each" and ".hover" function (when mouse-over, enlarge it by set the css's width and height)
There are alot more... I cant type it all...
Hi you can have a look here:
http://forum.yola.com/yola/topics/awesome_photo_gallery_code_for_your_website
It also links an example test page...
hope it helps