SPECIAL OFFER: Only $59 for access to everything in OSTraining for 1 year! You save $85!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Is this kind of slider possible

3 years 5 months ago #124323 by iqsafe
Is this kind of slider possible was created by iqsafe
I would like to put a number of pictures thumbs on the front page say like Figure (1) and when I click one of the pictures Figure (2) will appear. I quoted this example from Google Search. Please see Figure (1) and (2) inserted in order:






It is not necessary that all other requirement appearing in image are applied.
I would be very grateful for any efforts to achieve this.

This message has attachments images.
Please log in or register to see it.

Please Log in to join the conversation.

3 years 5 months ago - 3 years 5 months ago #124326 by Valentin
Replied by Valentin on topic Is this kind of slider possible
Hi iqsafe,

I'm not aware of a module that can generate that exact result, however there is a jquery gallery example with a similar look , however there is no direct way to integrate with Drupal, besides by loading the code manually into your website and reformatting the HTML from a view to get the desired effect.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: iqsafe

Please Log in to join the conversation.

3 years 5 months ago - 3 years 5 months ago #124330 by iqsafe
Replied by iqsafe on topic Is this kind of slider possible
Thank you, but I could not see the code when I clicked on your link....I only saw squared pictures with thumbs get expanded when relevant thumb clicked. Can you show me where please.

Please Log in to join the conversation.

3 years 5 months ago #124331 by Valentin

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: iqsafe

Please Log in to join the conversation.

3 years 5 months ago #124339 by iqsafe
Replied by iqsafe on topic Is this kind of slider possible
Thank you so much. But I wonder how I can incorporate the code in Drupal. Is it through a block, view, content type, ....etc, I am rather new in this. Can you detail me on this please.

Please Log in to join the conversation.

3 years 5 months ago #124343 by Daniel Pickering
Replied by Daniel Pickering on topic Is this kind of slider possible
Hi iqsafe,

Can you do it yes. Is it simple or easy no. You would need the following modules.

drupal.org/project/multiupload_filefield_widget
drupal.org/project/multiupload_imagefield_widget
www.drupal.org/project/colorbox
www.drupal.org/project/libraries
Some Skills with CSS

First off, enable the modules listed above.
Then we need to create a content type. In this case, we'll call it "Image Gallery".
Next, we need to create an image field inside this content type.
Choose "Image" as the field type and "Multiupload" as the widget type.
Set the number of allowed values for this field to "Unlimited".
Create some image presets (admin/config/media/image-styles), such as:
Gallery Thumbnail (150px x 150px) - used on the gallery page to list the images in that gallery.
Gallery Full Size (1000px wide) - used in an overlay when Gallery Thumbnail images are clicked on.
Go to your "Manage Display" page for this content type and for "Full Content" set the following displays for the image field
Label = Hidden
Image = Colorbox
On the colorbox settings, set "Content Image Style" as "Gallery Thumbnail" and "Colorbox Image Style" as the "Gallery Full Size"
There are some other options here as well. Feel free to experiment.
Click "Update".
Click "Save".
Now you are ready to create an image gallery. You may need some CSS to float the images left/right and set some margins/padding.

You can then use Views to list the galleries and link each item in the list to its corresponding gallery.

www.drupal.org/project/views

You might want to come back to this after you have had a bit more experience with colorbox and views.

Thanks,
Daniel
The following user(s) said Thank You: iqsafe

Please Log in to join the conversation.

3 years 5 months ago #124344 by iqsafe
Replied by iqsafe on topic Is this kind of slider possible
Thank you very much indeed for this detailed instructions. I had already installed the the Library project because I tried the Flex Slider which it did not work for this purpose. I am going to try your instructions one by one tomorrow morning. Thanks again.

Please Log in to join the conversation.

3 years 5 months ago #124348 by Daniel Pickering
Replied by Daniel Pickering on topic Is this kind of slider possible
Hi iqsafe,

It is complicated so my advise would be take your time and don't rush it good luck and if you have questions we are here.

Thanks,
Daniel
The following user(s) said Thank You: iqsafe

Please Log in to join the conversation.

3 years 5 months ago - 3 years 5 months ago #124349 by iqsafe
Replied by iqsafe on topic Is this kind of slider possible
Thank you a lot for coming to my rescue. I feel your steps are easy to follow by me and I will try it on a local server (WAMP) first. Sure, if I stumble on a difficulty I will resort to you.

Please Log in to join the conversation.

3 years 5 months ago - 3 years 5 months ago #124365 by iqsafe
Replied by iqsafe on topic Is this kind of slider possible
@Daniel Pickering
So far I think so well, I did all the steps you have given me. I installed and enabled the modules you mentioned in your post, I created a content type and called it (image gallery) and I did all the necessary steps for this content type as you did.
I created two image styles (imagegallerythumb) and the other (imagegalleryfull).
I went to the content type “image gallery” (Manage Display) and I changed all the parameters as instructed in your tutorial and saved. Ok now we may forget about the CSS and the floating right and left.
Now how do I use the views to complete the job so that the gallery become presentable? I used views a lot of times but I don’t know how to use it in this case. I entered three images in one node. If you like to have the username and password I can send to your email.
While waiting for your reply, I made a view and set it as I did with (Manage display) and three horizontal pictures appeared. Please have a look on the Site . Currently site is in Maintenance mode.

Your help is very much appreciated and indispensable.

Please Log in to join the conversation.

3 years 5 months ago #124402 by steve
Replied by steve on topic Is this kind of slider possible
Hi iqsafe

Looking over the images in your first post, you'll need to two different Views add-ons.

www.drupal.org/project/masonry_views will do the grid of images for you.

www.drupal.org/project/views_slideshow will do the slideshow. We have a class on Views Slideshow here: www.ostraining.com/class/slideshow/
The following user(s) said Thank You: iqsafe

Please Log in to join the conversation.

3 years 5 months ago - 3 years 5 months ago #124410 by iqsafe
Replied by iqsafe on topic Is this kind of slider possible
Thanks for your reply. Do you mean that I need the Masonary module in addition to the modules mentioned by Daniel. I am really confused. Also I have bad experience with Slideshow being not quite easily manageable with CSS for centering the images. In other websites I used flexslider. Kindly advise.

Thanks

Please Log in to join the conversation.

3 years 5 months ago #124438 by Daniel Pickering
Replied by Daniel Pickering on topic Is this kind of slider possible
Hi iqsafe,

The modules steve is suggesting would add functionality to the one I already listed and perhaps making it easier for you to achieve your desired look. I'm afraid I don't have the time to re create it myself on your behalf or I would look into doing it. Perhaps if we get a slow week I could work on it as a blog post for you.

Thanks,
Daniel
The following user(s) said Thank You: iqsafe

Please Log in to join the conversation.

3 years 5 months ago - 3 years 5 months ago #124622 by iqsafe
Replied by iqsafe on topic Is this kind of slider possible
I installed a colorbox for this site and a client asked me whether it is possible to include a Download button at the bottom of the of the resulting photo as appear in the picture.


Is this possible in any way. I would appreciate your help very much. Thanks.

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

3 years 5 months ago #124623 by Daniel Pickering
Replied by Daniel Pickering on topic Is this kind of slider possible
Hi iqsafe,

It's not really an option the only way I think you could do it would result in it being changed when you updated the module.

You could try the fancyBox module and adding some custom jq code

jsfiddle.net/zAe6Z/

$(".fancybox").fancybox({
afterLoad: function() {
this.title = '<a href="' + this.href + '">Download</a> ' + this.title;
},
helpers : {
title: {
type: 'inside'
}
}
});

Again you would have to not update the module or keep the code to add after update. But it is not often updated now so that might work.

Thanks,
Daniel
The following user(s) said Thank You: iqsafe

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!